复习：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>