复习：vue2中传值：父向子传值（父组件属性传值，子组件props接）
<div class="father">
<h4>父组件</h4>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
<Son1 :name="name" :age="age" @updateData="updateData" />
</div>
props:['name','age']
如果想在子组件修改父组件传过来的内容，因为props是只读，不能直接改，所以要中转一下。
div class="son1">
<h5>子组件</h5>
<div>姓名：{{myname}}</div>
<div>年龄：{{myage}}</div>
<button @click="updateData">修改数据</button>
</div>
data(){
return {
myname:this.name,
myage:this.age
}},
methods: {
updateData(){
this.myname="红红",
this.myage=22,}
如果想在子组件修改父组件传过来的内容，并且父组件的内容也一起修改，那么需要触发一个自定义事件，将修改后的数据传到父组件，父组件设置一个方法接收
this.$emit('updateData',{myname:this.name,myage:this.age})
methods: {
updateData(e){
this.name=e.myname
this.age=e.myage
}
},
vue3中父向子传值
（父组件属性传值，子组件props接，并且setup中用参数获取）
父组件传值
<div class="father">
<h4>父组件</h4>
<div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
<Son1 :name="name" :age="age" />
</div>
<script>
import { ref } from "vue";
import Son1 from "./Son1.vue";
export default {
name: "Father",
components: {
Son1,
},
setup() {
let name = ref("张三");
let age = ref(31);
return {
name,
age,
};
},
};
</script>
子组件接
子组件中props接收父组件传来的数据，setup的第一个参数props用来获取从父组件中传来的数据，props选项接收了几个传值，setup第一个参数就能获取几个参数
<div class="son1">
<h5>子组件</h5>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
</div>
import {toRefs} from 'vue'
export default {
name:'Son1',
props:['name','age'],
setup(props) {
return{
...toRefs(props)
}
}
}
如果想在子组件修改父组件传过来的内容，因为props是只读，不能直接改，所以要中转一下。
<div class="son1">
<h5>子组件</h5>
<div>姓名：{{myname}}</div>
<div>年龄：{{myage}}</div>
<button @click="updateData">修改数据</button>
</div>
<script>
import {ref} from 'vue'
export default {
name:'Son1',
props:['name','age'],
setup(props) {
let myname=ref(props.name)
let myage=ref(props.age)
let updateData=()=>{
myname.value="李四",
myage.value=33, }
return{
myname,myage,updateData
}
}
}
</script>
如果想在子组件修改父组件传过来的内容，并且父组件的内容也一起修改，那么需要触发一个自定义事件，将修改后的数据传到父组件，父组件设置一个方法接收:setup 的第二个参数，是一个上下文对象，里面有一个emit方法用于触发自定义事件
setup(props,{emit}) {
let myname=ref(props.name)
let myage=ref(props.age)
let updateData=()=>{
myname.value="李四",
myage.value=33,
emit('updateData',{myname:myname.value,myage:myage.value})
}
return{
myname,myage,updateData
}
}
子组件触发自定义事件，将修改后的数据传到父组件，父组件设置一个方法接收
let updateData = (e) => {
name.value = e.myname;
age.value = e.myage;
};
props选项没有接收的传值，通过setup里面上下文对象的attrs属性接收
setup(props,{emit,attrs}) {
let myname=ref(props.name)
let myage=ref(props.age)
let mysex=ref(attrs.sex)
let updateData=()=>{
myname.value="李四",
myage.value=33,
mysex.value="女"
emit('updateData',{myname:myname.value,myage:myage.value,mysex:mysex.value})
}
return{
myname,myage,updateData,mysex
}
}
slots对象返回的是插槽里面的虚拟DOM信息
setup(props,{emit,attrs,slots}) {
slots.top()[0].children="hhh"}
什么是虚拟DOM：就是vue实例所能识别的一个DOM信息对象，就是把真实的DOM转成一个对象形式，让vue能有所识别
<div class="box">abc</div>
//转换成
let v_div={
targetName:'div',
props:{
class:'box'
}
el:{},
children:'abc'
}
可以通过插槽传一份数据给插槽的使用者，这样的插槽叫作用域插槽
<slot name="bottom" :car="car"></slot>
<template #bottom="scope">
<div>
<h2>{{scope.car}}</h2>
</div>
</template>
