vue3语法糖父子组件传值 defineProps ,defineEmits,defineExpose

在 script setup 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 script setup 中是直接可用的

1. defineProps 接收与 props 选项相同的值，defineEmits 也接收 emits 选项相同的值

父组件

<template>
    <div>
       <Child :num= "num" @chuyi='chuyi' @addNum="addNum" name = "乘"></Child>
    </div>
</template>

<script setup>
    import Child from './child.vue'
    import {ref} from 'vue'
    const num = ref(1)
  
    const addNum = (e) => {
        num.value *= e
    }
    const chuyi = (e) => {
        num.value /= e
    }
</script>

<style>

</style>

子组件

<template>
    <div>
        <div>{{props.num}}</div>
        <button @click="btn">{{props.name}}</button>
        <button @click="chuyi">除以</button>
    </div>
</template>

<script setup>
    import { defineProps ,defineEmits} from "vue"
    
    const emits = defineEmits(['btn','chuyi'])

    const props =  defineProps({
        num:Number,
        name:String
    })
    // console.log(props);
    const btn = () => {
        emits('addNum',2)
    }
    const chuyi = () => {
        emits("chuyi",2)
    }
</script>

<style>

</style>

defineExpose

defineExpose 使用 script setup 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup中声明的绑定,组件中明确要暴露出去的属性，使用 defineExpose

//child.vue


<template>
    <div>{{num}}</div>
</template>

<script setup>
    import {ref,defineExpose} from 'vue'
    const num = ref(123)
    defineExpose({
        num
    })

</script>

<style>

</style>

//father.vue

<template>
    <div>
        <Child ref="child"></Child>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const child = ref(null)
setTimeout (() => {
    console.log(child.value.num++)
},1000)
</script>