How to call function on child component on parent events

Question

Context

In Vue 2.0 the documentation and others clearly indicate that communication from parent to child happens via props.

Question

How does a p

Answer 1

Give the child component a ref and use $refs to call a method on the child component directly.

html:

  
  Click  

javascript:

var ChildComponent = {
  template: '
{{value}}
',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

For more info, see Vue documentation on refs.