Styjun

What you are describing is a change of state in the parent. You pass that to the child via a prop. As you suggested, you would watch that prop. When the child takes action, it notifies the parent via an emit, and the parent might then change the state again.

var Child = 
 template: '<div>counter</div>',
 props: ['canI'],
 data: function () 
 return 
 counter: 0
 ;
 ,
 watch: 
 canI: function () 
 if (this.canI) 
 ++this.counter;
 this.$emit('increment');
 
 
 

new Vue(
 el: '#app',
 components: 
 'my-component': Child
 ,
 data: 
 childState: false
 ,
 methods: 
 permitChild: function () 
 this.childState = true;
 ,
 lockChild: function () 
 this.childState = false;
 
 
)

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

If you truly want to pass events to a child, you can do that by creating a bus (which is just a Vue instance) and passing it to the child as a prop.

You can use $emit and $on. Using @RoyJ code:

html:

<div id="app">
 <my-component></my-component>
 <button @click="click">Click</button> 
</div>

javascript:

var Child = 
 template: '<div>value</div>',
 data: function () 
 return 
 value: 0
 ;
 ,
 methods: 
 setValue: function(value) 
 this.value = value;
 
 ,
 created: function() 
 this.$parent.$on('update', this.setValue);
 


new Vue(
 el: '#app',
 components: 
 'my-component': Child
 ,
 methods: 
 click: function() 
 this.$emit('update', 7);
 
 
)

Running example: https://jsfiddle.net/rjurado/m2spy60r/1/

If you have time, use Vuex store for watching variables (aka state) or trigger (aka dispatch) an action directly.

Did not like the event-bus approach using $on bindings in the child during create. Why? Subsequent create calls (I'm using vue-router) bind the message handler more than once--leading to multiple responses per message.

The orthodox solution of passing props down from parent to child and putting a property watcher in the child worked a little better. Only problem being that the child can only act on a value transition. Passing the same message multiple times needs some kind of bookkeeping to force a transition so the child can pick up the change.

I've found that if I wrap the message in an array, it will always trigger the child watcher--even if the value remains the same.

Parent:

 data: function() 
 msgChild: null,
 ,
 methods: 
 mMessageDoIt: function() 
 this.msgChild = ['doIt'];
 
 
 ...

Child:

 props: ['msgChild'],
 watch: 
 'msgChild': function(arMsg) 
 console.log(arMsg[0]);
 
 

HTML:

<parent>
 <child v-bind=" 'msgChild': msgChild "></child>
</parent>

A simple decoupled way to call methods on child components is by emitting a handler from the child and then invoking it from parent.

var Child = 
 template: '<div>value</div>',
 data: function () 
 return 
 value: 0
 ;
 ,
 methods: 
 	setValue(value) 
 	this.value = value;
 
 ,
 created() 
 this.$emit('handler', this.setValue);
 


new Vue(
 el: '#app',
 components: 
 'my-component': Child
 ,
 methods: 
 	setValueHandler(fn) 
 	this.setter = fn
 ,
 click() 
 	this.setter(70)
 
 
)

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
 <my-component @handler="setValueHandler"></my-component>
 <button @click="click">Click</button> 
</div>

The parent keeps track of the child handler functions and calls whenever necessary.

The below example is self explainatory. where refs and events can be used to call function from and to parent and child.

// PARENT
<template>
 <parent>
 <child
 @onChange="childCallBack"
 ref="childRef"
 :data="moduleData"
 />
 <button @click="callChild">Call Method in child</button>
 </parent>
</template>

<script>
export default 
 methods: 
 callChild() 
 this.$refs.childRef.childMethod('Hi from parent');
 ,
 childCallBack(message) 
 console.log('message from child', message);
 
 
;
</script>

// CHILD
<template>
 <child>
 <button @click="callParent">Call Parent</button>
 </child>
</template>

<script>
export default 
 methods: 
 callParent() 
 this.$emit('onChange', 'hi from child');
 ,
 childMethod(message) 
 console.log('message from parent', message);
 
 

</script>

I think we should to have a consideration about the necessity of parent to use the child’s methods.In fact,parents needn’t to concern the method of child,but can treat the child component as a FSA(finite state machine).Parents component to control the state of child component.So the solution to watch the status change or just use the compute function is enough

You could use a mixin to set a shared data attribute. Change it in the parent, watch it in the child:

// mixin
export default 
 data() 
 return 
 clicked: false
 
 


// parent
export default 
 mixins: [myMixin],
 methods: 
 btnClick() 
 this.clicked = true
 
 


// child
export default 
 mixins: [myMixin],
 watch: 
 clicked(val) 
 if(val) 
 // yay