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>