Vue父子组件互相调用方法实例

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)触发事件（事件需要在父组件内注明，不然无法监听到），注意事件名不能用驼峰命名法，可以在事件名后加入参数，同样是用逗号隔开即可。