目录
    • app.vue
    • home.vue
    • homecontent.vue
    • 修改响应式property

    业务场景是,不是父子组件实现通信

    文件目录

    第一种方法

    app.vue

    <template>
      <div>
        <home></home>
        <button @click="addname">增加名字</button>
      </div>
    </template>
     <script>
    import home from "./home.vue";
    import { computed } from "vue";
    export default {
      name: "app",
      components: {
        home,
      },
      provide() {
        return {
          name: "张三",
          age: 23,
          length: computed(() => this.names.length),
        };
      },
      data() {
        return {
          names: ["张三", "李四", "王五"],
        };
      },
      methods: {
        addname() {
          this.names.push("fuck you");
          console.log("hhhh");
        },
      },
    };
    </script>
     <style scoped>
    </style>
    

    home.vue

    <template>
      <div>
        <div>我是home</div>
        <home-content></home-content>
      </div>
    </template>
     <script>
    import homecontent from "./homecontent.vue";
    export default {
      name: "home",
      components: {
        homecontent,
      },
    };
    </script>
     <style scoped>
    </style>
    

    homecontent.vue

    <template>
      <div>homecontent:{{ name }}--{{ age }}---{{ length }}</div>
    </template>
     <script>
    export default {
      inject: ["name", "age", "length"],
    };
    </script>
     <style lang="scss" scoped>
    </style>
    

    vue3中使用provide函数和inject函数

    事实上我们之前还学习过provide和inject,composition api也可以替代之前的 provide 和 inject 的选项。

    我们可以通过 provide来提供数据:

    provide可以传入两个参数:

    name:提供的属性名称;

    value:提供的属性值;

    在 后代组件 中可以通过 inject 来注入需要的属性和对应的值:

    可以通过 inject 来注入需要的内容;

    inject可以传入两个参数:

    要 inject 的 property 的 name;

    默认值;

    数据的响应式

    为了增加 provide 值和 inject 值之间的响应性,我们可以在 provide 值时使用 ref 和 reactive。

    修改响应式property

    如果我们需要修改可响应的数据,那么最好是在数据提供的位置来修改:我们可以将修改方法进行共享,在后代组件中进行调用;

    注意

    如果我们子组件应该是只能使用,不能修改的状态

    总结

    本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注www.887551.com的更多内容!