TOMMYHU

先来看看Vue3的几种组件通信方式：
props $emit expose / ref $attrs v-model provide / inject Vuex
下面分别介绍这几种方式的写法：

1、props
父组件 <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> 子组件 <script > export default defineComponent({   props = {     msg2: {       type: String,       default: ""     }   },   setup (props) {     console.log(props.msg2)   }, }) </script>
2、$emit

父组件
<template>   <button @click="handleClick">按钮</buttom> </template> <script> export default defineComponent({   setup () {     const handleClick = () => {       emit("myClick", "这是发送给父组件的信息")     }   } }) </script> 子组件 <template>   <child @myClick="onMyClick"></child> </template> <script> import child from "./child.vue" export default defineComponent({   setup () {     const onMyClick = (msg) => {       console.log(msg) // 这是父组件收到的信息     }   } }) </script>
3、expose / ref

父组件
<template>   <child ref="comp"></child>   <button @click="handlerClick">按钮</button> </template> <script> import child from "./child.vue" import { ref } from "vue" export default defineComponent({   setup () {     const comp = ref(null)     const handlerClick = () => {       console.log(comp.value.childName) // 获取子组件对外暴露的属性       comp.value.someMethod() // 调用子组件对外暴露的方法     }   } }) </script> 子组件 <script> export default defineComponent({   setup(){     defineExpose({       childName: "这是子组件的属性",       someMethod () {         console.log("这是子组件的方法")       }     })   } }) </script>
4、attrs

父组件
<child :msg1="msg1" :msg2="msg2"></child> <script> import child from "./child.vue" import { ref, reactive } from "vue" export default defineComponent({   setUp () {     const msg1 = ref("1111")     const msg2 = ref("2222")   } }) </script> 子组件 <script> import { useAttrs } from "vue" export default defineComponent({   setup () {     const attrs = useAttrs()     console.log(attrs)   } }) </script>
5、v-model

父组件(v-model可省略)
<child v-model:key="key" v-model:value="value"></child> <script>     import child from "./child.vue"     import { ref, reactive } from "vue"     export default defineComponent({       setup(){         const key = ref("1111")         const value = ref("2222")       }     }) </script> 子组件 <template>     <button @click="handlerClick">按钮</button> </template> <script>   export default defineComponent({     setup(props,{emit}){       const handlerClick = () => {           emit("update:key", "新的key")           emit("update:value", "新的value")       }     }   })      </script>
6. provide / inject

父组件
<script> import { provide } from "vue" export default defineComponent({   setup () {     provide("name", "测试")   } }) </script> 子组件 <script> import { inject } from "vue" export default defineComponent({   setup () {     const name = inject("name")     console.log(name) // 测试   } }) </script>
接下来是Vue2.x 组件通信使用方法：
1、 props

父组件
<template>     <child :msg="msg"></child> </template> 子组件 export default {   props:{       msg:{           type:String,           default:'这是默认数据'       }   },   mounted(){       console.log(this.msg)   }
2、.sync
父组件 <template>     <child :page.sync="page"></child> </template> <script> export default {     data(){         return {             page:1         }     } } 子组件 export default {     props:["page"],     computed(){         // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变         currentPage {             get(){                 return this.page             },             set(newVal){                 this.$emit("update:page", newVal)             }         }     } } </script>
3、v-model
父组件 <template>     <child v-model="value"></child> </template> <script> export default {     data(){         return {             value:1         }     } } 子组件 <template>     <input :value="value" @input="handlerChange"> </template> export default {     props:["value"],     // 可以修改事件名，默认为 input     model:{         event:"updateValue"     },     methods:{         handlerChange(e){             this.$emit("input", e.target.value)             // 如果有上面的重命名就是这样             this.$emit("updateValue", e.target.value)         }     } } </script>
4、ref
子组件 export default {     data(){         return {             name:""         }     },     methods:{         someMethod(msg){             console.log(msg)         }     } } 父组件 <template>     <child ref="child"></child> </template> <script> export default {     mounted(){         const child = this.$refs.child         console.log(child.name) // 测试         child.someMethod("调用了子组件的方法")     } } </script>
5、$emit / v-on
子组件 export default {   data(){       return { msg: "这是发给父组件的信息" }   },   methods: {       handleClick(){           this.$emit("sendMsg",this.msg)       }   }, } 父组件 <template>     <child v-on:sendMsg="getChildMsg"></child>     // 或 简写     <child @sendMsg="getChildMsg"></child> </template> export default {     methods:{         getChildMsg(msg){             console.log(msg) // 这是父组件接收到的消息         }     } } 6、children/parent [codes=c#] 父组件 export default{     mounted(){         this.$children[0].someMethod() // 调用第一个子组件的方法         this.$children[0].name // 获取第一个子组件中的属性     } } 子组件 export default{     mounted(){         this.$parent.someMethod() // 调用父组件的方法         this.$parent.name // 获取父组件中的属性     } }
7、EventBus
// 方法一 // 抽离成一个单独的 js 文件 EventBus.js ，然后在需要的地方引入 // EventBus.js import Vue from "vue" export default new Vue() // 方法二 直接挂载到全局 // main.js import Vue from "vue" Vue.prototype.$bus = new Vue()
8、Vuex（这个就不举例子了........懂的都懂！）