在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})  
    }
},
}