Vue 依赖注入 - Provide / Inject(重点)

SOBER小于 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>