vue 父页面中的方法 调用_Vue子组件调用父组件父页面的方法

很多时候，可能需要子组件去调用父组件的方法，之前写过《Vue依赖注入(provide/inject)》，里面有调用父组件方法，这次总结三种方法，相当于有四种方法！

第一种：子组件中通过this.$parent.event来调用父组件的方法

注意：使用此方法，层级很重要！

父组件：

import child from '~/components/dam/child';

export default {

components: {

child

},

methods: {

fatherMethod() {

console.log('测试');

}

}

};

子组件

点击

export default {

methods: {

childMethod() {

this.$parent.fatherMethod();

}

}

};

第二种：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

关于$emit，《Vue父子组件间通信实例讲解》这里做了详细的讲解，这里只展示代码，不做过多的说明！

父组件

import child from '~/components/dam/child';

export default {

components: {

child

},

methods: {

fatherMethod() {

console.log('测试');

}

}

};

子组件

点击

export default {

methods: {

childMethod() {

this.$emit('fatherMethod');

}

}

};

第三种：父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件

import child from '~/components/dam/child';

export default {

components: {

child

},

methods: {

fatherMethod() {

console.log('测试');

}

}

};

子组件

点击

export default {

props: {

fatherMethod: {

type: Function,

default: null

}

},

methods: {

childMethod() {

if (this.fatherMethod) {

this.fatherMethod();

}

}

}

};

第一种，使用时注意层级问题，不太推荐，推荐第二种方案。