1.provide和inject--处理层级嵌套的数据通信
- 父组件 provide来提供变量,然后再子组件中通过
inject来注入变量.无论组件嵌套多深provide是个函数，返回值一个对象inject是一个数组，用来接收provide传递过来的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script src="./vue.js"></script>
<script>
// provide
// inject
// 父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深
// 中央事件总线 bus
Vue.component('B', {
data() {
return {
count: 0
}
},
//通过inject去接收
inject:['msg'],
created(){
console.log(this.msg);
},
template: `
<div>
{{msg}}
</div>
`,
})
Vue.component('A', {
data() {
return {
}
},
created(){
//通过this.$parent获取父组件的数据，支持连续链式操作
console.log(this.$parent.$parent);
console.log(this.$children);
console.log(this);
},
template: `
<div>
<B></B>
</div>
`
})
const App = {
data() {
return {
title:"老爹"
}
},
//provide
provide(){
return {
msg:"老爹的数据"
}
},
template: `
<div>
<A></A>
</div>
`,
}
new Vue({
el: '#app',
data: {
},
components: {
// 2.挂载子组件
App
}
})
</script>
</body>
</html>
