vue3+ts 中的几种通信方式及使用方式 （使用setup语法糖操作）

我现在比较常用的是这四种： 父子通信（props）,子父通信（emit）,vuex,事件总线

1.父传子：

父组件中：

<template>
  <h2>父组件</h2>
  <hr>
  <Son :num="num" :arr="array" ></Son>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import Son from "./Son.vue";

let num = ref(6688)
let array = ref([11, 22, 33, 44])
</script>

子组件中：

<template>
  <h2>子组件</h2>
  {{props.num}}--{{props.arr}}
</template>

<script lang="ts" setup>
let props = defineProps({
  num: Number,
  arr: {
    type: Array,
    default: () => [1, 2, 3, 4]
  }
})
</script>

2.子传父：

子组件中：

<template>
  <h2>子组件</h2>
  <button @click="sendMsg">向父组件传递数据</button>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const emit = defineEmits(["son_sendMsg"]);
const msg = ref("子组件传递给父组件的数据")

function sendMsg() {
  emit("son_sendMsg", msg.value)
}
</script>

父组件中：

<template>
  <h2>父组件</h2>
  {{ message }}
  <hr>
  <Son @son_sendMsg="fun"></Son>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import Son from "./Son.vue"

let message = ref("")
function fun(msg) {
  message.value = msg
}
</script>

3.vuex 状态管理

创建 store/index.js

import {creatStore} from 'vuex'

const store = creatStore({
   state: {
     userInfo: {
       name:'hello'
     } 
   },
mutations: {
  setName(state,val){
   state.userInfo.name = val
  }
},
actions: {},
getters: {}

})


export default store

 在组件中使用： 

1.直接在标签中使用：

<p>{{$store.state.userInfo.name}}</p>

或者代码中更改数据：

<el-button @click="nameChange">更改Vuex名字</el-button>

<script lang="ts" setup>
 import {ref,onMounted,watch} from 'vue';
//状态vuex
import {useStore} from 'vuex'; 

const store = useStore();

function nameChange(){
    store.commit('setName','王二麻子')
}



</script>

获取更新的数据

<el-button >{{name}}</el-button>

<script lang="ts" setup>
 import {ref,onMounted,watch} from 'vue';
//状态vuex
import {useStore} from 'vuex'; 

const store = useStore();

//响应式数据
const name = ref(store.state.userInfo.name);


//监听数据
watch(() =>store.state.userInfo.name,(newVal,oldVal) =>{name.value = newVal})


</script>

4.事件总线：

• Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据

安装： 

npm install mitt

这里需要几个步骤： 1，定义一个工具库eveBus.js

import mitt from "mitt";

// export default mitt();

//也可以写完整的

const emitter = mitt();
//每调用一个mitt,都是一个总线,所以这里为什么要封装为一个工具库,就是只使用一个总线

export default emitter;

2.在组件中使用

one.vue

<template>
  <p>从Two接收到的数据[{{receiveData}}]</p>
</template>

<script setup>
import { ref } from 'vue';
// 引入总线
import emitter from "@/utils/eveBus";
export default {
  name: 'One',
  const receiveData = ref([]);
    // 绑定总线(添加订阅)
  emitter.on('giveOne',(value)=>{
   // 回调函数
   receiveData.value = value;
  })
}
</script>

two.vue

<template>
  <button @click="giveValue">传递给One值</button>
</template>

<script setup>
import emitter  from '@/utils/eveBus';
export default {
  name: 'Two',
    function giveValue(){
      // 调用总线,发布订阅
      emitter.emit('giveOne',"我是从Two传递过来的值");
    };
}
</script>