provide/inject
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- A嵌套B组件 B组件又嵌套C组件 -->
<a-component></a-component>
</div>
<script>
//组件A
Vue.component('a-component', {
data () {
return {
jc1: 1000,//数值
name:'zs'
}
},
// provide他相当于发射器，发送的内容，是通过返回值return出来
provide () {
this.jc1= Vue.observable({ //不使用这个方法时是死数据不会进行改变，使用了就是双向数据绑定的
jc1:1000
});
return {
jc2: this.jc1, //jc是你自己后面传递给其他子组件，其他组件的值 通过获取自己data中数据然后将其注入给后代
names:this.name
}
},
template: `
<div>
我是A组件--{{jc1}}
<button @click='handle'>点击我改变值</button>
<b-component></b-component>
</div>`,
methods: {
handle(){
// this.jc1=100000000
console.log(this)
// console.log(this.jc1)
}
},
})
// 组件B
Vue.component('b-component', {
// 接收器，接受我们 provide函数返回的值
inject: ['jc2','names'],
template: `<div>
我是B组件--{{jc2}}---{{names}}
<c-component></c-component>
</div>`
})
//组件C
Vue.component('c-component', {
inject: ['jc2','names'],
template: `<div>我是C组件--{{jc2}}---{{names}}</div>`
})
// Vue.config.productionTip = false
Vue.config.silent = false
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
关于provide/inject的一些知识
