Question

vue 自组件怎么直接访问父组件

Answer 1

问题分析：

在Vue中，子组件如果需要访问父组件的方法，可以采用自定义事件v-on指令（简写：@）来完成。

举例如下：

以下案例将演示点击子组件模板中的按钮，触发子组件中的方法childFunc。然后在该方法中使用$emit来触发子组件的自定义事件parent。由该自定义事件来调用父组件的parentFun方法。

HTML代码：

<div id="app">
    <child @parent='parentFunc'></child>
</div>

Vue代码：

Vue.component('child', {
    template: '<button v-on:click="childFunc">触发按钮</button>',
    methods: {
        childFunc: function () {
            this.$emit('parent');
        }
    },
})
new Vue({
    el: '#app',
    methods: {
        parentFunc: function () {
            alert('我是来自父组件的内容');
        }
    }
})

点击子组件按钮后的效果：

总结：

从页面提示出的结果可以看出，当点击子组件按钮时，调用了父组件中的parentFunc方法。