vue provide inject vue依赖注入 vue跨多组件通讯

vue进阶实战课目录

provide inject跨多组件通讯

ref和$parent / $children` 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 这样的解决方案，不得不引入三方库来支持。本次介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。
provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

vue的组件传值常用三种方式，1.prop传值2.$parent / $children传值3.provide inject

注意！provide和inject只能传值或提供方法给子组件，子组件不能调用父组件方法和数据！！例如 父组件的provide 子组件都能获取到，但子组件provide 父组件是拿不到的。

<!--  -->
<template><div><div class="alert alert-primary" v-show="show">消息提示</div><div class="btn btn-primary" @click="rename(123)">edit children</div><demo></demo></div>
</template><script>import demo from './demo-item.vue';export default {// 无法获取子组件方法和数据inject:['title','rename'],provide() {return {show: this.show,showHide: this.showHide}},components: {demo},data() {return {show: false};},methods: {showHide(data){this.show = data}},watch: {},computed: {},created() {console.log(this.title)},mounted() {}};
</script>
<style></style>

子组件

<!--  -->
<template><div><h5>{{title}}</h5><button class="btn btn-danger" @click="showHide(true)">显示main组件里的消息提示框</button><button class="btn btn-warning" @click="showHide(false)">隐藏main组件里的消息提示框</button></div>
</template><script>export default {inject:['show','showHide'],provide(){return {title:this.title,rename:this.rename}},components: {},data() {return {title: "我是父组件的标题"};},methods: {rename(data) {this.title = data}},watch: {},computed: {},created() {// console.log(this.show)},mounted() {}};
</script>
<style></style>

代码

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！