(VUE3) 四、组件传值（父子组件传值 & 祖孙组件传值 &v

1.父子组件传值

vue2中的父子组件传值：
父组件：

<template>
  <div class="parent">
      <h2>父组件</h2>
      <div>姓名：{{name}}</div>
      <div>年龄：{{age}}</div>
      <Son1 :name="name" :age="age" @updateData="updateData"></Son1>
  </div>
</template>

<script>
import Son1 from './Son1.vue'
export default {
  name: "Parent",
  data() {
      return {
          name:'张三',
          age:20
      }
  },
  methods: {
      updateData(e){
          this.name = e.myName
          this.age = e.myAge
      }
  },
  components:{
      Son1
  }
};
</script>

子组件：

<template>
  <div class="son1">
      <h2>Son1</h2>
      <div>姓名：{{myName}}</div>
      <div>年龄：{{myAge}}</div>
      <div><button @click="updateData">修改数据</button></div>
  </div>
</template>

<script>
export default {
  name: "Son1",
  props:["name","age"],
  data() {
      return {
          myName:this.name,
          myAge:this.age
      }
  },
  methods: {
      updateData(){
          this.myName = '李四'
          this.myAge = 30
          this.$emit('updateData',{myName:this.myName,myAge:this.myAge})
      }
  },
};
</script>

vue3中的父子组件传值：

还是用props接收父组件的传值啊哈 props:["name","age"]
setup ( ) 的第一个参数，props，用于获取父组件的传值。
注意：props选项接收了几个参数，setup函数的第一个参数就只能获取几个参数。

setup ( ) 的第二个参数，context，是一个上下文对象，这个对象里面有emit，attrs，slots三个对象。
① emit，用于触发自定义事件。
② attrs，用于接收props选项没有接收的传值。
③ slots，返回的是插槽里面的虚拟DOM信息。

父组件：

<template>
  <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
  }
};
</script>

子组件：

<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的第二个参数，context，是一个上下文对象，这个对象里面有attrs，emit，slots三个对象。
  // 它里面一个方法emit，用于触发自定义事件。
  // props选项没有接收的传值，在setup里面通过上下文对象的attrs属性接收。

  setup(props,{emit,attrs,slots}) {
    // slots对象返回的是插槽里面的虚拟DOM信息
    // 什么是虚拟DOM，就是vue实例所能识别的一个DOM信息对象。
    console.log(slots.top());
    // console.log(attrs);
    // console.log(context);
    // console.log('son1',props);
    // console.log(isReadonly(props));
    // 中转props里面的数据，因为props是只读的。
    
    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
    }
  }
};
</script>