Vue 依赖注入 - Provide / Inject(重点)
小于 1 分钟
Vue 依赖注入 - Provide / Inject(重点)
通常情况下,父组件向孙组件传递数据,可以采用父子props
层层传递,也可以使用bus(中央事件总线)
和Vuex
直接交互。在Vue2.2.0之后,Vue还提供了provide / inject
选项
//爷爷
<p>{{ title }}</p>
<son></son>
<script>
import Son from "./son"
export default {
name: 'Father',
components: { Son },
// provide选项提供变量
provide: {
message: 'provided by father'
},
data () {
return {
title: '父组件'
}
},
}
</script>
//爸爸
<p>{{ title }}</p>
<grand-son></grand-son>
<script>
import grandSon from "./grandSon "
export default {
name: "Son",
components: { grandSon },
data () {
return {
title: '子组件'
}
},
};
</script>
//孙子
<p>message:{{ message }}</p>
<script>
export default {
name: "GrandSon",
inject: [ "message" ],
data () {
return {
title: '孙组件'
}
},
};
</script>