Vue3组件通讯方式

由于vue3将vue2的选项变为了组合API, 而且把data和methods集合到了setup中, 故而使用起来有所区别, 但也大差不差。

1、defineProps方式

父组件以数据绑定的形式声明要传递的数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据。

父组件中：

<!-- data是我们要传递的数据 -->
<child-components :data="data"></child-components>

子组件中:

需注意，这里的父组件传值和vue2大差不差，只是需要注意引入一下defineProps并在使用一个变量获取这个defineProps方可接受数据.

<template>
  <ul>
    <li v-for="i in props.data" :key="i">{
   
   { i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})
</script>

2、defineEmits方式

子组件中：

<script setup>
import { defineEmits} from 'vue'
methods:{
    const emits = defineEmits(['add'])
    emits('add', 1)
}

</script>

父组件中：

<!-- add是子组件要传递的动作,handleAdd是监听到之后执行的事件 -->
<child-components @add="handleAdd"></child-components>
<script>
 const list = ref([1,2,3])
 const handleAdd = value => {
  list.value.push(value)
}
</script>

3、mitt兄弟传值

为了使自己的代码工整, 我们都会用很多组件来构造一个完整页面，

可是写着写着就不对劲了这是vue3啊很多语法都不熟悉,敢这么写,我带着恐惧和迷茫写着

进入主场：

兄弟组件之间传值需要用到插件：mitt

第一步

安装 npm i mitt

这里习惯也就用vue2传值就用bus当中间件了

下载mitt中间件后在js文件中导入这个实例，定义一个变量来接收，最后导出

使用的时候也是需要两个组件都需要引入这个实例文件

兄弟组件派送：

<script setup>
import emitter from '@until/bus.js'
methods:{
    getData() {
        emitter.emit('event',this.addDialogFlag)
    }
}

</script>

派送时前面是事件,后面是要传入的参数

兄弟组件接受：

<script setup>
import emitter from '@until/bus.js'

onMounted() {
    emitter.on('event',e=>{
        this.data.username = e;
        this.getData();
    })
}

</script>

需要在onMounted()周期中接收这里使用 emitter.on( )

爷孙组件传值VueX

Vuex 是 Vue 官网中的状态管理工具，使用这个工具可以轻松实现祖级组件之间通信。

附：传值时 defineProps、defineEmit并不是必引，不引入照样可以达到传值效果，建议是引入，避免不必要的报错

1、defineProps方式

2、defineEmits方式

3、mitt兄弟传值

猜你喜欢