在Vue3中父子组件传值，
在子组件身上通过绑定属性的方式传递数据
子组件在props中接收，接收几个参数setup的形参就能获取到几个参数
setup函数有两个形参（props，content）
setup中的形参props用于接收父组件传递过来的值
接收参数后，return出去就可以在模板中使用
...toRefs(props)
要修改父组件传递过来的值
需要用ref转一下，再修改转过后的变量的数据，因为props里的值默认只能读不能改。
如果也要同时修改父级的数据，需要设置emit('自定义事件名称'，传送的数据)，再返回出去
这里的emit事件是setup里content（上下文对象）形参中的emit
父组件页面在子组件标签身上绑定子组件的自定义事件，父组件通过函数中的e接收传递过来的数据，并通过name.value=e.xx修改数据
setup的第一个参数，用于获取父组件的传值setup(props,content)
注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。
setup的第二个参数，是一个上下文对象；它里面一个方法是emit，用于触发自定义事件
props选项没有接收的传值，在setup里面通过上下文对象的attrs属性接收（相当于vue2中的$attrs兜底函数）
slots对象返回的是插槽里面的虚拟DOM信息
什么是虚拟DOM，就是vue实例所能识别的一个DOM信息对象。
vue3父子组件传值——子
<template>
<div class="son1">
<!-- 定义具名插槽 -->
<slot name="top"></slot>
<h2>Son1</h2>
<div>姓名:{{ myName }}</div>
<div>年龄:{{ myAge }}</div>
<div>性别:{{ mySex }}</div>
<div><button @click="updateData">修改数据</button></div>
<!-- 可以通过插槽传递一份数据给插槽的使用者，这样的插槽成为：作用域插槽 -->
<slot name="bottom" :car="car"></slot>
</div>
</template>
<script>
import {ref,reactive} from 'vue';
export default {
name: "Son1",
//接收父组件的传值
props: ["name", "age"],
//setup的第一个参数，用于获取父组件的传值
//注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。
//setup的第二个参数，是一个上下文对象；它里面一个方法是emit，用于触发自定义事件
//props选项没有接收的传值，在setup里面通过上下文对象的attrs属性接收
setup(props,{emit,attrs,slots}) {
// slots对象返回的是插槽里面的虚拟DOM信息
// 什么是虚拟DOM，就是vue实例所能识别的一个DOM信息对象。
console.log(slots.top());
//中转props里面的数据，因为props是只读的
console.log(isReadonly(props)); //true
let myName = ref(props.name)
let myAge = ref(props.age)
let mySex = ref(attrs.sex)
let car = reactive({
name:'奔驰',
price:20
})
let updateData = ()=>{
myName.value = '李四'
myAge.value = 30
mySex.value = '女'
//触发自定义事件
emit('updateData',{myName:myName.value,myAge:myAge.value,mySex:mySex.value})
}
return {
myName,
myAge,
mySex,
updateData,
car
}
}
};
vue3父子组件传值——父
<div class="parent">
<h2>父组件</h2>
<div>姓名:{{ name }}</div>
<div>年龄:{{ age }}</div>
<div>年龄:{{ sex }}</div>
<Son1 :name="name" :age="age" :sex="sex" @updateData="updateData">
<!-- 这里是具名插槽 -->
<template v-slot:top>
<div class="box">这里顶部</div>
<div class="box">
<button>这里顶部</button>
</div>
</template>
<!-- #是v-slot:的简写 -->
<template #bottom="scope">
<div class="box">这里底部
<ul>
<li>{{scope.car.name}}</li>
<li>{{scope.car.price}}</li>
</ul>
</div>
</template>
</Son1>
</div>
</template>
<script>
import {ref} from 'vue'
import Son1 from "./Son1.vue";
export default {
name: "Parent",
setup() {
let name = ref('张三')
let age = ref(20)
let sex = ref('男')
let updateData = (e)=>{
name.value = e.myName
age.value = e.myAge
sex.value = e.mySex
}
return {
name,
age,
sex,
updateData
}
}, components: {
Son1,
},
};
Vue2中的父子组件传值
父传子通过绑定给子组件身上属性
子组件在props接收，可直接使用数据
要改变从父组件接收到的数据需要在date里中转一下（记得改页面表达式）
要同步改变父组件的数据，在子组件自定义事件this.$emit(函数名，数据)，并在父页面的子组件身上绑定该事件。
父组件定义该事件，并通过e接收传递过来的参数赋给自己的变量
父组件
<div class="parent">
<h2>父组件</h2>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<Son1 :name="name" :age="age" @updateFull="updateFull"></Son1>
</div>
import Son1 from './Son1.vue'
export default {
name:'Parent',
components:{
Son1
},
data() {
return {
name:'张三',
age:20
}
},
methods: {
updateFull(e){
this.name=e.myName
this.age=e.myAge
}
},
}
子组件
<div class="son">
<h2>子组件</h2>
<p>姓名：{{myName}}-年龄：{{myAge}}</p>
<button @click="updateFull">修改信息</button>
</div>
export default {
name:'App',
props:['name','age'],
data(){
return{
myName:this.name,
myAge:this.age
}
},
methods: {
updateFull(){
this.myName='王五'
this.myAge=18
this.$emit('updateFull',{myName:this.myName,myAge:this.myAge})
}
},
}
