vue中父子组件如何相互调用方法

百变鹏仔 3个月前 (09-25) #VUE

文章标签父子

在 vue 中，父子组件可以通过以下方式相互调用方法：父组件调用子组件方法：通过 props、refs。子组件调用父组件方法：通过 emit、provide/inject。

Vue 中父子组件如何相互调用方法

在 Vue 中，父子组件可以通过以下方法相互调用方法：

父组件调用子组件方法

子组件调用父组件方法

立即学习“前端免费学习笔记（深入）”；

具体步骤

父组件调用子组件方法

使用 props：

<!-- 父组件 --><template><childcomponent :my-method="myMethod"></childcomponent></template><script>  export default {    methods: {      myMethod() {        console.log("父组件的方法被调用了");      },    },  };</script><!-- 子组件 --><template><button>触发父组件的方法</button></template><script>  export default {    props: ['myMethod'],  };</script>

使用 refs：

<!-- 父组件 --><template><childcomponent ref="child"></childcomponent></template><script>  export default {    mounted() {      this.$refs.child.myMethod(); // 调用子组件的方法    },  };</script><!-- 子组件 --><template><button>触发父组件的方法</button></template><script>  export default {    methods: {      myMethod() {        console.log("父组件的方法被调用了");      },    },  };</script>

子组件调用父组件方法

立即学习“前端免费学习笔记（深入）”；

使用 emit：

<!-- 子组件 --><template><button>触发父组件的事件</button></template><script>  export default {    methods: {      triggerEvent() {        this.$emit('my-event'); // 触发父组件的事件      },    },  };</script><!-- 父组件 --><template><childcomponent></childcomponent></template><script>  export default {    methods: {      myMethod() {        console.log("子组件触发了父组件的事件");      },    },  };</script>

使用 provide/inject：

<!-- 父组件 --><template><childcomponent></childcomponent></template><script>  export default {    provide() {      return {        myMethod: () => {          console.log("父组件的方法被调用了");        },      };    },  };</script><!-- 子组件 --><template><button>触发父组件的方法</button></template><script>  export default {    inject: ['myMethod'],  };</script>

文章推荐

vue中父子组件如何相互调用方法

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器