父子组件传参

父组件向子组件传参

1. 父组件可以通过v-bind向子组件传递参数，使用字符串类型可以不需要v-bind，例如：

./conFa.vue

<template>
    <div>
        <p style="color:#22863a">cpnFa组件：</p>
        我是爹

        <!-- 可以试一下不传age，会发现输出age为默认值6 -->
        <son :age=10 name="rarrot" />
    </div>
</template>
<script setup lang='ts'>
import son from './cpnSon.vue'

</script>
<style scoped></style>

2. 子组件通过defineProps接收父组件传过来的值，例如：

./conSon.vue

<template>
    <div>
        <p style="color:#22863a">cpnSon组件：</p>

        我是儿子，我爹给我取名为: {{ name }}，年龄为 {{ age }}
    </div>
</template>
<script setup lang='ts'>
import Button from '../../组件库/Button.vue'
// 1.直接使用defineProps接收父组件传过来的值
const props=defineProps({
    name:{
        type:String,
        default:'默认值'
    },
    age:{
        type:Number,
        default:6
    }
})

// 2.使用ts特有的方式：
// 使用withDefaults接收默认值，当父组件没有传age时，age为6
withDefaults(defineProps<{
    name: string,
    age: number
}>(), {
    age: () => 6
})

</script>
<style scoped></style>

子组件给父组件传参

defineEmits

1. 子组件通过defineEmits给父组件传值，例如：

./conSon.vue

<template>
    <div>
        <p style="color:#22863a">cpnSon组件：</p>

        <br/>
        获取爹的名字：<Button @click="send" hoverF="回答" hoverS="click!"></Button>
    </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import { number } from 'echarts';
// 1.子组件传值给父组件
// const emit = defineEmits(['on-click'])

// 2.用ts方式
const emit = defineEmits<{
    (e: 'on-clicks', name: string): void
}>()

const send = () => {
    emit('on-clicks', '爸爸的名字是：Rarrot')
}
</script>
<style scoped></style>

2. 父组件通过注册on-clicks事件来接收到子组件传过来的值：

./conFa.vue

<template>
    <div>
        <p style="color:#22863a">cpnFa组件：</p>
        我是爹

        <son ref="cpnSonp" @on-clicks="getName" :age=10 name="rarrot" />
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import son from './cpnSon.vue'

const getName = (name: string) => {
    console.log(name+'，ok')//输出：爸爸的名字是：Rarrot，ok
}
</script>
<style scoped></style>

defineExpose

1. 子组件通过defineExpose将属性暴露出来，例如：

defineExpose({
    sex:'男'    
})

2. 父组件要接收到子组件暴露的属性，需要在组件实例挂载后才能获取，例如：

<template>
    <div>
        <p style="color:#22863a">cpnFa组件：</p>
        我是爹
        获取孩子的性别：<Button @click="getSonSex" hoverF="获取" hoverS="性别"></Button>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import son from './cpnSon.vue'
// 获取子组件的引用
const cpnSonp = ref<InstanceType<typeof son>>()

const getSonSex=()=>{
    // 获取子组件暴露出来的属性
    console.log('孩子的性别是' + cpnSonp.value?.sex)
}

onMounted(()=>{
    getSonSex()
})
</script>
<style scoped></style>

示例

可以打开开发者工具进行测试：

cpnFa组件：

我是爹 获取孩子的性别：

cpnSon组件：

我是儿子，我爹给我取名为: rarrot，年龄为 10
获取爹的名字：