目录
Vue3 组件通信方式
1. Props（父组件给子组件传递数据）
子组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{text}}</div>
<div>{
{props.text}}</div>
</div>
</template>
<script setup>
let props=defineProps(["text"])
console.log(props)
</script>子组件需要使用到defineProps方法去接受父组件传递过来的数据，defineProps是vue3提供方法,不需要引入直接使用，props为代理对象，在模板中使用可以{ {props.属性名}}或者{ {直接属性名}}进行使用。当然在<script>标签中获取属性名的值只能props.属性名。并且这里的props代理对象仅仅只是可读的，不可以修改。
父组件
<template>
<div style="height:200px;background-color: red">
<son :text="text"></son>
</div>
</template>
<script setup>
import son from './Son.vue'
import {ref} from "vue"
let text=ref("hello")
</script>2. 自定义事件 （子组件给父组件传递数据）
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。
原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change.mouseenter自定义事件，可以实现子组件给父组件传递数据。在vue3框架click、dbclick、change(这类原生DOM事件).不管是在标签、自定义标签上(组件标签)都是原生DOM事件。
子组件
<template>
<div style="height:100px;background-color: yellow">
<button @click="handle">点击触发</button>
</div>
</template>
<script setup>
//利用defineEmits方法返回函数触发自定义事件,defineEmits方法不需要引入直接使用
let emit=defineEmits(['xxx'])
const handle=()=>{
// 第一个参数:事件类型第二个|三个|N参数即为注入数据
emit('xxx','hello')
}
</script>父组件
<template>
<div style="height:200px;background-color: red">
<son @xxx="hander"></son>
</div>
</template>
<script setup>
import son from './Son.vue'
import {ref} from "vue"
const hander=(param)=>{
alert(param)
}
</script>
3. v-model
父组件
<template>
<div style="height:200px;background-color: red">
<son v-model:text="text"></son>
</div>
</template>
<script setup lang="ts">
import son from './Son.vue'
import {ref} from "vue"
let text=ref("hello")
</script>子组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{text}}</div>
<el-button @click="handle">点击</el-button>
</div>
</template>
<script setup lang="ts">
let props=defineProps(["text"])
let emit=defineEmits(["update:text"])
const handle=()=>{
emit("update:text","20")
}
</script>4. ref和$parent
父组件控制子组件
父组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{money}}</div>
<el-button @click="handle">父组件金钱加10，子组件金钱减10</el-button>
<son ref="son1"></son>
</div>
</template>
<script setup lang="ts">
import son from "./Son.vue"
import {ref} from "vue"
let son1=ref()
let money=ref(100)
const handle=()=>{
money.value+=10
son1.value.money-=10
}
</script>子组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{money}}</div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue"
let money=ref(80)
//组件内部数据对外关团的,别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
money
})
</script>子组件控制父组件
父组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{money}}</div>
<son></son>
</div>
</template>
<script setup lang="ts">
import son from "./Son.vue"
import {ref} from "vue"
let money=ref(100)
//组件内部数据对外关团的,别人不能访问
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
money
})
</script>子组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{money}}</div>
<el-button @click="handle($parent)">父组件金钱加10，子组件金钱减10</el-button>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue"
let money=ref(80)
const handle=(parent)=>{
money.value-=10
// 这里为代理对象
parent.money+=10
}
</script>5. Provide和inject
父节点及以上节点和子孙节点的传值，注意传递获得的数据使用的是同一个对象，一个改变其余的都改变。
父组件
<template>
<div style="height:100px;background-color: yellow">
<son></son>
</div>
</template>
<script setup lang="ts">
import son from "./Son.vue"
import {ref,provide,reactive} from "vue"
let money=ref(100)
provide("money",money)
</script>子组件
<template>
<div style="height:100px;background-color: yellow">
<div>{
{money}}</div>
</div>
</template>
<script setup lang="ts">
import {ref,inject} from "vue"
let money=inject("money")
</script>6. 插槽
父组件
<template>
<div style="height:100px;background-color: yellow">
<son>
<div>hello</div>
<!-- <template v-slot:text>-->
<!-- <div>具名插槽内容</div>-->
<!-- </template>-->
<template #text>
<div>具名插槽内容</div>
</template>
<template #test="{row}">
<div>{
{row.title}}</div>
<div>{
{row.content}}</div>
</template>
</son>
</div>
</template>
<script setup lang="ts">
import son from "./Son.vue"
import {ref,provide,reactive} from "vue"
</script>
子组件
<template>
<div style="height:50px;background-color: bisque">
<h>子组件默认插槽</h>
<slot></slot>
<h>子组件具名插槽</h>
<slot name="text"></slot>
<h>子组件作用域插槽</h>
<slot :row="state" name="test"></slot>
</div>
</template>
<script setup >
import {reactive} from "vue"
const state=reactive({
title:"hello",
content:"good"
})
</script>