HTML
<div id="parent">
</div>
父组件
var parentVue= new Vue({
el: "#parent",
template: `<div>
<button @click="clickToInvokeChildMethod">父组件调用子组件方法</button>
<child @p-method="parentMethod" ref="child"></child>
</div>`,
components: {
'child': child
},
methods: {
parentMethod: function (value) {
console.log("父组件方法被调用,调用者:" + value);
},
clickToInvokeChildMethod: function () {
this.$refs.child.childMethod("父组件");
}
}
});
在父组件中将子组件局部注册,给子组件的元素上绑定p-method的事件,当该事件触发时调用parentMethod方法。不要忘记给元素加上ref。
给按钮绑定clickToInvokeChildMethod方法,当点击时,找到父组件refs下的ref为child的组件(可以为多个),调用其childMethod方法,括号内为参数(可以为多个,用逗号隔开)。
(注意:子组件应该要写在父组件之前,不然局部注册时会找不到)
子组件
var child = Vue.extend({
template: `<div>
<button @click="clickToInvokeParentMethod">子组件调用父组件方法</button>
</div>`,
methods: {
childMethod: function (value) {
console.log("子组件方法被调用:调用者" + value);
},
clickToInvokeParentMethod: function () {
this.$emit("p-method", "子组件") //注意此处命名不能用驼峰写法例如:pMethod
}
}
});
子组件调用父组件的方法比较简单,在方法内通过$emit(eventName)触发事件(事件需要在父组件内注明,不然无法监听到),注意事件名不能用驼峰命名法,可以在事件名后加入参数,同样是用逗号隔开即可。