vue3组件通信的方式

1、props

父组件A通过props的方式向子组件B传递
vue2写法

//父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
//子组件
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

vue3写法

// Parent.vue 传送
<child :msg2="msg2"></child>
<script setup>
    import child from "./child.vue"
    import { ref, reactive } from "vue"
    const msg2 = ref("这是传给子组件的信息2")
    // 或者复杂类型
    const msg2 = reactive(["这是传级子组件的信息2"])
</script>

// Child.vue 接收
<script setup>
    // 不需要引入 直接使用
    // import { defineProps } from "vue"
    const props = defineProps({
        // 写法一
        msg2: String
        //等价于以字符串数组声明props
        //const props=defineProps(['msg2'])
        // 写法二
        msg2:{
            type:String,
            default:""
        }
    })
    //如果在setup中使用则直接 props.XXX
    console.log(props) // { msg2:"这是传级子组件的信息2" }
</script>

2、$emit

vue2

//子组件
<template>
	<button @click="changeTitle" class="btn btn-primary" type="button">
</template>
<script>
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
</script>
//父组件
<template>
	<button @titleChanged="handleChange" class="btn btn-primary" type="button">
</template>
<script>
  methods:{
    handleChange(value) {
      this.title=value
    }
</script>

vue3

// Child.vue 派发
<template>
    <button @click="handleClick">按钮</buttom>
</template>
<script setup>
    
    // 方法一 适用于Vue3.2版本 不需要引入
    // import { defineEmits } from "vue"
    const emit = defineEmits(["myClick","myClick2"])
    const handleClick = ()=>{
        emit("myClick", "这是发送给父组件的信息")
    }
    
    // 方法二 不适用于 Vue3.2版本，该版本 useContext()已废弃
    import { useContext } from "vue"
    const { emit } = useContext()
    const handleClick = ()=>{
        emit("myClick", "这是发送给父组件的信息")
    }
</script>

// Parent.vue 响应
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    const onMyClick = (msg) => {
        console.log(msg) // 这是父组件收到的信息
    }
</script>

3、expose / ref

父组件获取子组件的属性或者调用子组件方法

// Child.vue
<script setup>
    // 方法一 不适用于Vue3.2版本，该版本 useContext()已废弃
    import { useContext } from "vue"
    const ctx = useContext()
    // 对外暴露属性方法等都可以
    ctx.expose({
        childName: "这是子组件的属性",
        someMethod(){
            console.log("这是子组件的方法")
        }
    })
    
    // 方法二 适用于Vue3.2版本, 不需要引入
    // import { defineExpose } from "vue"
    defineExpose({
        childName: "这是子组件的属性",
        someMethod(){
            console.log("这是子组件的方法")
        }
    })
</script>

// Parent.vue  注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handlerClick">按钮</button>
</template>
<script setup>
    import child from "./child.vue"
    import { ref } from "vue"
    const comp = ref(null)
    const handlerClick = () => {
        console.log(comp.value.childName) // 获取子组件对外暴露的属性
        comp.value.someMethod() // 调用子组件对外暴露的方法
    }
</script>

4、attrs

attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
    import child from "./child.vue"
    import { ref, reactive } from "vue"
    const msg1 = ref("1111")
    const msg2 = ref("2222")
</script>

// Child.vue 接收
<script setup>
    import { defineProps, useContext, useAttrs } from "vue"
    // 3.2版本不需要引入 defineProps，直接用
    const props = defineProps({
        msg1: String
    })
    // 方法一 不适用于 Vue3.2版本，该版本 useContext()已废弃
    const ctx = useContext()
    // 如果没有用 props 接收 msg1 的话就是 { msg1: "1111", msg2:"2222", title: "3333" }
    console.log(ctx.attrs) // { msg2:"2222", title: "3333" }
    
    // 方法二 适用于 Vue3.2版本
    const attrs = useAttrs()
    console.log(attrs) // { msg2:"2222", title: "3333" }
</script>

5、v-model

可以支持多个数据双向绑定
在子组件中我们需要定义props和 emits，添加完成后emit指定事件，传递内容；需要注意的是，update: * 是Vue中的固定写法，后我们就可以v-model: * = “某值”，*代表props中的某个属性名；

//父组件
<template>
  <el-input
      v-model="input"
      placeholder="Please input"
  >
    <template #append>
      <el-button @click="confirm">确认</el-button>
    </template>
  </el-input>
 
</template>
 
<script setup>
import {ref, defineProps, defineEmits} from "vue"
import {ElMessage} from "element-plus";
 
const input = ref('')
 
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['update:list'])
 
function confirm() {
  if (input.value) {
    const arr = JSON.parse(JSON.stringify(props.list))
    arr.push(input.value)
    emits("update:list", arr)
    input.value = ''
  } else {
    ElMessage({
      message: '请输入内容',
      type: 'warning',
    })
  }
}
</script>

//子组件
<template>
  <child v-model:list="list"></child>
  <div>
    <h3 v-for="(item,index) in list" :key="index">{{ item }}</h3>
  </div>
</template>
 
<script setup>
import Child from "./components/Child";
import {ref} from "vue";
 
const list = ref([])
</script>

6、 provide / inject

provide / inject 为依赖注入
provide：可以让我们指定想要提供给后代组件的数据
inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

// Parent.vue
<script setup>
    import { provide } from "vue"
    provide("name", "沐华")
</script>

// Child.vue
<script setup>
    import { inject } from "vue"
    const name = inject("name")
    console.log(name) // 沐华
</script>

7、Vuex

// store/index.js
import { createStore } from "vuex"
export default createStore({
    state:{ count: 1 },
    getters:{
        getCount: state => state.count
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})

// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"
createApp(App).use(store).mount("#app")

// Page.vue
// 方法一 直接使用
<template>
    <div>{{ $store.state.count }}</div>
    <button @click="$store.commit('add')">按钮</button>
</template>

// 方法二 获取
<script setup>
    import { useStore, computed } from "vuex"
    const store = useStore()
    console.log(store.state.count) // 1

    const count = computed(()=>store.state.count) // 响应式，会随着vuex数据改变而改变
    console.log(count) // 1 
</script>

拓展：vuex分模块的使用
vuex分模块使用

8、mitt

Vue3 中没有了 EventBus 跨组件通信，但是现在有了一个替代的方案 mitt.js，原理还是 EventBus

//1、安装
npm i mitt -S

//2、封装
mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

使用

// 组件 A
<script setup>
import mitt from './mitt'
const handleClick = () => {
    mitt.emit('handleChange')
}
</script>

// 组件 B 
<script setup>
import mitt from './mitt'
import { onUnmounted } from 'vue'
const someMethed = () => { ... }
mitt.on('handleChange',someMethed)
onUnmounted(()=>{
    mitt.off('handleChange',someMethed)
})
</script>