1、子组件获取父组件参数
子组件通过defineProps接受传参
// 父组件
<template>
<div>我是父组件,下面是我的子组件</div>
<son :list="list" title="父组件title"/>
</template>
<script setup lang="ts">
import son from './son.vue'
import { reactive } from 'vue'
const list = reactive<number[]>([1, 2, 3])
</script>
// 子组件
<template>
<div>--------子组件--------</div>
<div>{{ title }}</div>
<div>{{ list }}</div>
</template>
<script setup lang="ts">
type Props = {
title?: string,
list?: number[]
}
// 1、无默认值版
// defineProps<Props>()
// 2、ts有默认值版
withDefaults(defineProps<Props>(), {
title: '子组件默认title',
list: () => [ 3, 2, 1 ]
})
</script>
2、子组件向父组件发射事件
defineEmits派发一个事件
// 父组件
<template>
<div>我是父组件,下面是我的子组件</div>
<son @getList="getList"/>
</template>
<script setup lang="ts">
import son from './son.vue'
const getList = (list: number[], flag: boolean) => {
console.log('父组件接受子组件发射事件', list, flag)
}
</script>
// 子组件
<template>
<div>--------子组件--------</div>
<button @click="clickHandle">子发父事件</button>
</template>
<script setup lang="ts">
const list = [999, 999, 999]
const emit = defineEmits(['getList'])
const clickHandle = () => {
emit('getList', list, true)
}
</script>
3、父组件获取子组件方法、属性
// 父组件
<template>
<div>我是父组件,下面是我的子组件</div>
// 1、通过ref获取子组件实例
<son ref="sonRef"/>
</template>
<script setup lang="ts">
import son from './son.vue'
import { ref } from 'vue'
const sonRef = ref(null)
console.log(sonRef)
</script>
// 子组件
<template>
<div>--------子组件--------</div>
<button @click="clickHandle">子发父事件</button>
</template>
<script setup lang="ts">
const list = [999, 999, 999]
const emit = defineEmits(['getList'])
const clickHandle = () => {
emit('getList', list, true)
}
// 2、通过defineExpose属性向父组件暴露允许的属性、方法
defineExpose({
list,
clickHandle
})
</script>
4、额外知识点:?? 使用
只针对与undefined和null
undefined ?? [] // []
null ?? [] // []
0 ?? [] // 0
false ?? [] // false
原文链接:https://xiaoman.blog.csdn.net/article/details/122850170