提供与注入如何在vue项目中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
提供者/注入:简单的来说就是在父组件中通过提供者来提供变量,然后在子组件中通过注入来注入变量。
需要注意的是这里不论子组件有多深,只要调用了注入那么就可以注入提供者中的数据,而不是局限于只能从当前父组件的道具属性来获取数据。
第一:定义一个父组件
& lt; template>
,& lt; div>
& lt; childOne> & lt;/childOne>
,& lt;/div>
& lt;/template>
& lt; script>
,import childOne 得到& # 39;. ./组件/测试/ChildOne& # 39;
,export default {
,,名字:“Parent",
,,提供:{
,,:,“demo"
,,},
组件:{才能
childOne。才能
,,}
以前,} 在这里我们在父组件中提供这个变量。
第二定义一个子组件
& lt; template>
,& lt; div>
,,{{演示}}
& lt;才能childtwo> & lt;/childtwo>
,& lt;/div>
& lt;/template>
& lt; script>
,import childtwo 得到& # 39;。/ChildTwo& # 39;
,export default {
,,名字:“childOne",
,,注入:[& # 39;为# 39;],
数据才能(),{
,,return {
,,,演示:this.for
,,}
,,},
,,组件:{
childtwo。才能
,,}
,}
& lt;/script> 第三定义另一个子组件
& lt; template>
,& lt; div>
,,{{演示}}
,& lt;/div>
& lt;/template>
& lt; script>
,export default {
,,名字:““,
,,注入:[& # 39;为# 39;],
数据才能(),{
,,return {
,,,演示:this.for
,,}
,,}
,}
& lt;/script> 在两个子组件中我们使用jnject注入了提供提供的变量,并将它提供给了数据属性。
这里官网注明例子只工作在Vue 2.2.1或更高版本。低于这个版本时,注入的值会在道具和数据初始化之后得到。
运行之后看下结果
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
