Vue3 defineProps、defineEmits、defineExpose 的作用

• 这几个属性都是在 <script setup> 方式时使用。

• defineProps - 组件之间传值

  // 父组件
  <template>
    <Child :val="val"></Child>
  </template>
  
  // 子组件
  <script setup>
  import { defineEmits } from "vue"
  const props = defineProps({
    val: {
      type: String,
      default: ""
    }
  })
  </script>
  

• defineEmits - 子组件向父组件事件传递

  // 父组件
  <template>
   <Child  @success="success"></Child>
  </template>
  <script setup>
  function success (e) {
    console.log(e)
  }
  </script>
  
  //子组件
  <template>
   <button @click="handleClick">点击按钮</button>
  </template>
  <script setup>
  import { defineEmits } from "vue"
  const emits = defineEmits(['success'])
  function handleClick () {
    emits("success", "子组件向父组件传递数据")
  }
  </script>
  

• defineExpose - 子组件暴露自己的属性或方法

  // 父组件
  <template>
    <Child ref="RefChildExpose"></Child>
    <button @click="touchButton">点击使用子组件</button>
  </template>
  <script setup>
  const RefChildExpose = ref(null)
  function touchButton () {
    // 使用子组件方法
    RefChildExpose.value.show()
    // 输出子组件属性
    console.log(RefChildExpose.value.count)
  }
  </script>
  
  // 子组件
  <script setup>
  import { defineExpose } from "vue"
  function show () {
    console.log('显示')
  }
  defineExpose({
    show,
    count: 1
  })
  </script>