关于javascript:Vue-3-提供与注入

5次阅读

共计 2460 个字符，预计需要花费 7 分钟才能阅读完成。

通常，当咱们须要将数据从父组件传递到子组件时，咱们应用 props。设想一下这样的构造：你有一些深嵌套的组件，而你只须要来自深嵌套子组件中父组件的某些内容。在这种状况下，你依然须要将 prop 传递到整个组件链中，这可能会很烦人。

对于这种状况，咱们能够应用 provide 和 inject 对。父组件能够作为其所有子组件的依赖项提供程序，而不论组件层次结构有多深。这个个性有两个局部：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始应用这个数据。

Provide/inject scheme

例如，如果咱们有这样的层次结构：

`Root
└─ TemplateM
├─ TestCom
`

如果咱们的子组件须要调用父组件的办法，咱们就能够应用 provide/inject 将父组件的 Vue 实例对象传递进去：

`<template>
  <div class=”template-m-wrap”>
    <test-com :title=”lastName”></test-com>
  </div>
</template>
<script>
import TestCom from ‘./TestCom’
export default {
  name: “TemplateM”,
  components: {
    TestCom
  },
  provide: {
    parent: “this”
  },
  data() {
    return {
      firstName: ‘dsdsdd’,
      lastName: ‘Ken’
    };
  },
  methods: {
    submit(options) {
      console.log(options)
    }
  },
};
</script>
`

而后在子组件注入父组件的 parent 属性：

`<template>
  <div class=”test-com-wrap”>
    {{title}}
    <button @click=”click”> 按钮 </button>
  </div>
</template>
<script>
export default {
  name: “TestCom”,
  props: {
    title: {
      type: String,
      default: “”,
    },
  },
  inject: [‘parent’],
  emits: [‘click-event’],
  created() {
    console.log(this.$attrs)
  },
  methods: {
    click(e) {
      console.log(this.parent)
      this.$emit(‘click-event’, e)
    }
  }
};
</script>
`

查看浏览成果如下：

然而，如果咱们尝试在此处提供一些组件实例 property，则这将不起作用：

“provide: {
todoLength: this.todos.length // 将会导致谬误 ‘Cannot read property ‘length’ of undefined`
},
“

要拜访组件实例 property，咱们须要将 provide 转换为返回对象的函数，接下来咱们将父组件的实例传递到子组件中，这样咱们就能在子组件拜访到父组件的属性了：

`<template>
  <div class=”template-m-wrap”>
    <test-com :title=”lastName”></test-com>
  </div>
</template>
<script>
import TestCom from “./TestCom”;
export default {
  name: “TemplateM”,
  components: {
    TestCom,
  },
  provide() {
    return {parent: this};
  },
  data() {
    return {
      firstName: “dsdsdd”,
      lastName: “Ken”,
    };
  },
  methods: {
    submit(options) {
      console.log(options);
    },
  },
};
</script>
`

在子组件中应用 parent:

`<template>
  <div class=”test-com-wrap”>
    {{title}}
    <button @click=”click”> 按钮 </button>
  </div>
</template>
<script>
export default {
  name: “TestCom”,
  props: {
    title: {
      type: String,
      default: “”,
    },
  },
  inject: [‘parent’],
  emits: [‘click-event’],
  created() {
    console.log(this.$attrs)
  },
  methods: {
    click(e) {
      console.log(this.parent)
      this.$emit(‘click-event’, e)
    }
  }
};
</script>
`