Mistj's Digital Garden

Appearance

vue之provide-inject

依赖注入 | Vue.js

  • 解决props层层传递问题
  • 支持应用层面的注入
  • 可用指定默认值，适用与父组件没有提供provide的情况
  • 为保证注入方和供给方之间的响应性链接，可使用 computed() 函数提供一个计算属性
  • 使用 Symbol 来作为注入名以避免潜在的冲突

父：

html
<template>  
  <div>  
    super message = {{ message }}  
    <br>  
    <child1 />  
  </div>  
</template>  
  
<script>  
import Child1 from '@/views/ant/test/Child1'  
  
export default {  
  name: 'Super',  
  components: { Child1 },  
  data() {  
    return {  
      message: 'hello!'  
    }  
  },  
  provide() {  
    // 使用函数的形式，可以访问到 `this`    return {  
      message: this.message  
    }  
  }  
}  
</script>
<template>  
  <div>  
    super message = {{ message }}  
    <br>  
    <child1 />  
  </div>  
</template>  
  
<script>  
import Child1 from '@/views/ant/test/Child1'  
  
export default {  
  name: 'Super',  
  components: { Child1 },  
  data() {  
    return {  
      message: 'hello!'  
    }  
  },  
  provide() {  
    // 使用函数的形式，可以访问到 `this`    return {  
      message: this.message  
    }  
  }  
}  
</script>

子:

html
<template>  
  <div>  
    child2: fullMessage= {{ fullMessage }} <br>  
    message = {{ message }}  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Child2',  
  inject: ['message'],  
  // 支持别名的方式
  // inject: { /* 本地属性名 */ 
  //    localMessage: { from: /* 注入来源名 */ 'message' },
  //    default: 'default value' 
  // },
  data() {  
    return {  
      // 注入会在组件自身的状态之前被解析，因此你可以在 data() 中访问到注入的属性：  
      // 基于注入值的初始数据  
      fullMessage: this.message  
    }  
  },  
  created() {  
    console.log(this.message) // injected value  
  }  
}  
</script>
<template>  
  <div>  
    child2: fullMessage= {{ fullMessage }} <br>  
    message = {{ message }}  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Child2',  
  inject: ['message'],  
  // 支持别名的方式
  // inject: { /* 本地属性名 */ 
  //    localMessage: { from: /* 注入来源名 */ 'message' },
  //    default: 'default value' 
  // },
  data() {  
    return {  
      // 注入会在组件自身的状态之前被解析，因此你可以在 data() 中访问到注入的属性：  
      // 基于注入值的初始数据  
      fullMessage: this.message  
    }  
  },  
  created() {  
    console.log(this.message) // injected value  
  }  
}  
</script>