defineExpose
組件暴露自己的屬性
defineExpose可以將方法主動暴露出來
父組件
//通過ref
<tree :show="show"
ref="treeRef">
</tree>
// ref
const treeRef = ref()
const handleClick = () => {
//獲取ref中的子組件方法handleNodeClick()
treeRef.value.handleNodeClick()
}
子組件
```javascript
import { ref defineExpose } from 'vue'
const handleNodeClick = () => {
console.log('要執行的方法')
}
//將方法暴露出
defineExpose({ handleNodeClick})
defineEmits
子組件向父組件事件傳遞.
父組件
//getGatewayData要獲取的參數
<tree :show="show"
@gatewayData="getGatewayData">
</tree>
//執行方法獲取參數
const getGatewayData = (e) => {
console.log('getGatewayData', e)
}
子組件
import { ref, defineEmits } from 'vue'
const emits = defineEmits(['handleNodeClick'])
const handleNodeClick = (e) => {
emits('gatewayData', label.value)
}
defineProps
獲取組件傳值
template>
<h1>{{ msg }}</h1>
<div @click="clickThis">1111</div>
</template>
<script setup lang="ts">
defineProps<{ // 採用ts專有聲明,無默認值
msg: string,
num?: number
}>()
// 採用ts專有聲明,有默認值
interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
defineProps({ // 非ts專有聲明
msg: String,
num: {
type:Number,
default: ''
}
})
</script>
<style scoped lang="less">
</style>