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>