Vue学习：17-子传父实例

实例一：字符串数组式声明自定义事件

Student.vue

<script setup>
  //自定义事件
  let emit = defineEmits(['changeAge','changeAgeAndName','changeStudent'])

  function emitEventAge() {
    emit('changeAge',30)
  }
</script>

<template>
  <button @click="emitEventAge">更改年龄</button>
  <br>
  <br>
  <button @click="emit('changeAgeAndName',10,'Annie')">更改年龄和名字</button>
  <br>
  <br>
  <button @click="emit('changeStudent',{age: 40,name: 'Drew',sex: '男'})">更改学生（验证通过）</button>
  <br>
  <br>
  <button @click="emit('changeStudent',{age: -10,name: 'Tom',sex: '男'})">更改学生（验证失败）</button>
</template>

App.vue

<script setup>
  import {reactive} from 'vue'
  import StudentVue from './components/Student.vue'

  let student = reactive({
    name: 'Jack',
    age: 18,
    sex: '男'
  })

  //获取子组件传递值
  function getNewAge(newAge) {
    console.log('年龄的新值：' + newAge)
    student.age = newAge
  }

  function getNewAgeAndName(newAge,newName) {
    console.log('年龄的新值：' + newAge)
    console.log('名字的新值：' + newName)
    student.age = newAge
    student.name = newName
  }

  function getNewStudent(stu) {
    console.log('学生新值：');
    console.log(stu);
    student.age = stu.age
    student.name = stu.name
    student.sex = stu.sex
  }

</script>

<!-- 视图区域（view） -->
<template>
  {{ student }}
  <hr>
  <StudentVue 
    @change-student="getNewStudent"
    @change-age-and-name="getNewAgeAndName"
    @change-age="getNewAge" />

</template>

实例二：对象式声明自定义事件

将上一个实例的Student.vue修改

<script setup>
  //自定义事件
  let emit = defineEmits({
    changeAge: null, //无需验证
    changeAgeAndName: null,  //无需验证
    changeStudent: stu => {
      if(stu.age <= 0) {
        console.warn('年龄不得小于等于0')
        //false验证不通过，会有警告语句，父组件依旧可以获取该值
        return false
      } else {
        //验证通过
        return true
      }
    }
  })

  function emitEventAge() {
    emit('changeAge',30)
  }
</script>

<template>
  <button @click="emitEventAge">更改年龄</button>
  <br>
  <br>
  <button @click="emit('changeAgeAndName',10,'Annie')">更改年龄和名字</button>
  <br>
  <br>
  <button @click="emit('changeStudent',{age: 40,name: 'Drew',sex: '男'})">更改学生（验证通过）</button>
  <br>
  <br>
  <button @click="emit('changeStudent',{age: -10,name: 'Tom',sex: '男'})">更改学生（验证失败）</button>
</template>