vue3.2中的defineProps、defineEmits、defineExpose

1.defineExpose---主动暴露出来方法

子组件：

import { ref defineExpose } from 'vue'
const handleNodeClick = () => {
 console.log('要执行的方法')
}
//将方法暴露出
defineExpose({ handleNodeClick})

父组件：

// 通过ref
<tree :show="show" ref="treeRef"></tree>  
const treeRef = ref()
const handleClick = () => {
    // 获取ref中的子组件方法handleNodeClick()
 treeRef.value.handleNodeClick()
}

2.defineEmits---传事件的同时带上所传的值

子组件：

import { ref, defineEmits } from 'vue'
const emits = defineEmits(['gatewayData'])
const handleNodeClick = (e) => {
 emits('gatewayData', label.value)
}

多个事件的话还可以采用ts申明的写法：

const emit = defineEmits<{
  (e: 'gatewayData', val: boolean): void,
  (e: 'gatewayData1'): void
  (e: 'gatewayData2'): void
}>()

父组件：

//getGatewayData要获取的参数
<tree :show="show" @gatewayData="getGatewayData"></tree>
//执行方法获取参数
const getGatewayData = (e) => {
  console.log('getGatewayData', e) // 这里的e，就是子组件传过来的值label.value
}

3.defineProps---获取组件传值

<template>
<h1>{{ msg }}</h1>
</template>
<script setuplang="ts">

// 采⽤ts专有声明，有默认值（withDefaults）
interface Props {
  msg?: string
  labels?: string[]
}
const props =withDefaults(defineProps<Props>(),{
      msg:'hello',
      labels: ()=> ['one','two'],
      obj: () => { return {a:2} }
})

=================================================

// 方法1：采⽤ts专有声明，⽆默认值
defineProps<{
    msg: string,
    num?: number
}>()

// 方法2：采用⾮ts专有声明
defineProps({
    msg: String,
    num:{
        type:Number,
        default:''
    }
})
</script>

实例：父组件传值给子组件

1、定义子组件 

<template>
  我是子组件
  <p>子组件得到的name：{{ props.name }}</p>
  <p>子组件得到的age：{{ props.age }}</p>
  <!--可以省略前面的props直接写属性名--->
  <p>子组件得到的name：{{ name }}</p>
  <p>子组件得到的age：{{ age }}</p>
</template>

<script setup>
//方式1： 以对象的形式去接收
const props = defineProps({
  name: {
    type: String,
    default: "张三",
  },
  age: {
    type: Number,
    default: 22
  }
});

// props.age = 18 // 报错，注意 defineProps 中的属性只读不能修改

//方式2： 以数组的方式去接收
//const childProps = defineProps(['name', 'age']);
</script>

2、定义父组件 

<template>
  name: {{ name }} <br />
  age: {{ age }} <br />
  <Child :name="name" :age="age" />
</template>

<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'

const name = ref('LiuQing');
const age = ref(18);
</script>