Vue3实现数据共享

---

前言

       在Vue3x学习期间，学习到了组件间如何实现数据共享这一知识，由于知识点的重要性和实现组件数据共享的多样性，通过博客笔记的方式进行记录，方便后续的复习和巩固。

---

一、组件之间的关系。

1. 父子关系
2. 兄弟关系
3. 子孙关系（后代关系）
   
   通过树形式的表达，我们可以很直观的知道组件之间的关系。例如：A和B，C就是父子关系，而B和C就是兄弟关系，A和D，G等则属于后代关系。

1. 组件间共享的关系

       同理，因为存在不同的组件关系也就衍生出数据共享的不同。那么不同关系之间的组件的数据共享又是怎样的呢？

1. 父 -> 子: 毋庸置疑的就是父组件通过某种方式将数据共享到子组件，父组件共享数据发生变化时子组件接收到的数据也要随之发生相同数值的变化。简而言之：父变子才变。
2. 子 -> 父: 子组件将数据共享至父组件，简而言之：父随子变。
3. 父 <-> 子: 与上述不同的是，父子之间的数据共享是双向的， 同步的，简而言之：父子都控制数据的改变。

二、Vue组件如何实现数据共享？

2.1 父组件单向共享

学习过Vue的同学对props属性肯定有一定的了解，而父组件向子组件共享数据就用到了该知识点。原理是：父组件在引用子组件时，将需要共享的数据以props传值的方式动态绑定在props对应对应的属性上。

子组件代码如下：

<template>
    <div class="container">
        <h3>子组件-数据共享之props</h3>
        <span>子组件传入的count值为: {{ number }} --props</span>
    </div>
</template>

<script>
export default {
    name: 'dataShare1',
    // 声明需要接受的props属性变量number
    props: ["number"],

}
</script>

父组件代码如下：

<template>
  <div class="app-container">
    <h1>App父组件-数据共享演示</h1>
    <p>父组件传出的count值为: {{ count }} --props</p>
    <button @click="add1">加一</button>
</template>

<script>
import DataShare1 from './components/DataShare1.vue';

export default {
  name: 'MyApp',
  components: {
    DataShare1,
  },
  data() {
    return {
      flag: true,
      count: 0,
    }
  },
  methods: {
    add1() {
      this.count++;
    },
  }
}

当我们执行加一操作时：

2.2 子组件单向共享

子组件单向共享数据到父组件的方式是通过自定义属性，原理是：子组件通过emits进行自定义事件名的声明，当子组件中通过this.$emit()进行自定义事件调用的同时将需要共享的数据作为参数共享出去，父组件则需要在methods中定义对应的获取数据方法，以标签形式使用子组件的同时，通过@自定义属性名=获取数据方法名的方式获取数据。

子组件代码如下：

<template>
    <div class="container">
        <h3>子组件-数据共享之自定义事件</h3>
        <button @click="add">加一</button>
        <span>子组件传出的number值为: {{ number }} ---自定义事件</span>
    </div>
</template>

<script>
export default {
    name: 'dataShare2',
    // 自定义事件名
    emits: ["GetNumber"],
    data() {
        return {
            number: 100,
        }
    },
    methods: {
        add() {
            this.number++
            // 自定义事件调用和数据共享
            this.$emit("GetNumber", this.number);
        }
    }
}
</script>

父组件代码如下：

<template>
  <div class="app-container">
    <p>子组件传入的number值为: {{ number }} --自定义事件</p>
    <hr>
    <DataShare2 @get-number="get"></DataShare2>
</template>

<script>
import DataShare2 from './components/DataShare2.vue';

export default {
  name: 'MyApp',
  components: {
    DataShare1,
  },
  data() {
    return {
      number: 0,
    }
  },
  methods: {
    get(val) {
      this.number = val;
    }
  }
}
</script>

2.3 父子组件双向共享

Vue3x中是本人在学习中首次接触使用v-model指令实现父子组件间的数据双向共享，实现的原理如下：

我们可以发现，这个方法跟自定义事件和props的实现存在着大同小异，像是两者的结合版，将@换成了v-model同时:紧跟的是子组件中的props对象,父组件使用对应的变量接收即可实现。（但是！我们需要注意的是：子组件的emits写法是固定的’update:props变量’, 调用也必须是this.$emit(‘update:props变量’，props变量)）话不多说，我们直接上代码：

子组件代码：

<template>
    <div class="container">
        <h3>子组件-数据共享之v-model</h3>
        <span>子组件传入的number值为: {{ number }} --v-model</span>
        <button @click="add">加一</button>
    </div>
</template>

<script>
export default {
    name: 'dataShare1',
    props: ["number"],
    emits: ["update:number"],
    methods: {
        add() {
            this.$emit("update:number", this.number + 1);
        }
    }
}
</script>

父组件代码

<template>
  <div class="app-container">
    <DataShare3 v-model:number="num"></DataShare3>
  </div>
</template>

<script>
import DataShare3 from './components/DataShare3.vue';

export default {
  name: 'MyApp',
  components: {
    DataShare3,
  },
  data() {
    return {
      num: 50
    }
  },
  methods: {
    add2() {
      this.num++;
    },
  }
}
</script>

2.4 兄弟组件单向共享

由于Vue3x已经将$emit() / on()弃用，因此要向Vue2x一样实现eventBus兄弟组件数据共享，需要使用mitt包，此处不做过多阐述，感兴趣者可自行查阅资料。

数据接收组件

数据共享组件

2.5.父组件和后代组件数据共享

在vue3中提出了provide和injectComposition API实现了父组件和后代组件（孙组件或更深层次的组件）之间的通信，让组件间的通信变得更简单。

祖先组件代码：

 setup(props, context) {

    let point = printPoint();

    let data = ref("我是爷组件传递的数据");
    provide('data', data)

    return {
      point,
      data
    }
  }

后代组件代码：

setup() {
        let data = inject('data');

        return {
            data
        }
    }

总结

       以上是本人在Vue3中实现组件数据共享的知识点记录，自知能力有限，存在错误可在留言区讨论， 觉得文章对您有帮助的可以点赞收藏一下。