vue3中的组件通信
一、props(父传子)
props主要用于父组件向子组件通信。在父组件中通过用 :msg=“msg” 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。
方法一：
// 父组件 传值
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {setup() {// 基础类型传值const msg1 = ref("父组件传给子组件的msg1");// 复杂类型（数组或对象）传值const msg2 = reactive(["父组件传给子组件的msg2"]);return {msg1,msg2}}
}
</script>
// 子组件 接收
<script>
export default {// props接受父组件传过来的值props: ["msg1", "msg2"],setup(props) {console.log(props);// { msg1:"父组件传给子组件的msg1", msg2:"父组件传给子组件的msg2" }},
}
</script>
方法二：使用 setup 语法糖
// 父组件 传值
<child :msg="msg">
</child>
<script setup>import child from "./child.vue";import { ref, reactive } from "vue";const msg = ref("父组件传给子组件的值");// const msg = reactive(["父组件传给子组件的值"]);// const msg = reactive({"父组件传给子组件的值"});
</script>// 子组件 接收
<script setup>// 这里不需要在从vue中引入defineProps，直接用const props = defineProps({// 第一种写法msg: String;// 第二种写法msg:{type:String,default:""}})console.log(props);
</script>
注意：
props中数据流是单项的，即子组件不可改变父组件传来的值
在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。
二、emit(子传父)
emit 也就是通过自定义事件传值，主要用于子组件向父组件通信。
在子组件的点击事件中，通过触发父组件中的自定义事件，把想传给父组件的信息以参数的形式带过去，父组件便可以拿到子组件传过来的参数值。
子组件传参
<button @click="handleClick">点击</button>
<script>
export default {name: "son",setup(props,context) {const handleClick = () => {context.emit('myClick', '我是子组件的值')}return { handleClick }}
}
</script>
使用setup时，它接受两个参数：
- props: 组件传入的属性
- context
setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。
在vue3中得setup()中得第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
父组件接收
<div class="father"><h1>这是父组件</h1><Son @myClick="handleClick"></Son>
</div>
<script>
import Son from './son.vue'
export default {name: "father",components: {Son},setup() {const handleClick = (val) => {console.log(val)}return{handleClick}}
}
</script>
三、expose / ref
expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。
第一种方法：expose
子组件
setup(props, context) {context.expose({childName: "子组件的名称属性",childMethod() {console.log("子组件的方法");}})}
父组件接收属性和方法
<Son ref="childRef"></Son>
<button @click="handlerClick">按钮</button>
<script>
import Son from './son.vue';
import { ref } from "vue";
export default {name: "father",components: {Son},setup() {const childRef = ref(null);const handlerClick = () => {// 获取子组件对外暴露的属性const childName = childRef.value.childName;console.log(childName);// 调用子组件对外暴露的方法childRef.value.childMethod();console.log(childRef);}return { childRef, handlerClick }}
}
</script>
第二种方法：defineExpose
子组件
<script setup>
defineExpose({childName: "子组件的名称属性",childMethod() {console.log("子组件的方法");}
})
</script>
四、provide / inject
provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。
provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。
inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。
父组件或者可以说成祖组件
<h2>我是祖组件--{{name}}---{{price}}</h2>
<Child />
import Child from "@/components/inject/child.vue"
import { reactive,toRefs,provide } from "vue";
components:{Child},setup() {let car = reactive({name:'特斯拉',price:'10w'});provide('car',car)return{...toRefs(car)}}
子组件或者是后代组件
<script>
import { inject } from 'vue';
export default {setup() {let cars = inject('car')console.log(cars,'****');return{cars}}
}
</script>
