Vue 3 父子组件通信

父传子

代码演示效果：

父组件代码如下：

<script setup>
import { ref } from 'vue'
import SonCom from '@/components/SonComponentOne.vue'

const testNumber = ref(100)
const getTestNumber = () => {
    testNumber.value += 10
    console.log(testNumber.value)
}

</script>

<template>
<div>
    <h1> 父组件 - {{ testNumber }}</h1>
    <button @click="getTestNumber"> 增加 </button>
    <SonCom :testNumber="testNumber"></SonCom>
</div>
</template>

<style scoped>

</style>

子组件代码如下：

<script setup>
const props = defineProps({
    testNumber: Number
})

</script>

<template>
<h2>子组件 - {{ testNumber }} </h2>
</template>

<style scoped>

</style>

总结：

步骤与Vue2一样，1.父组件中给子组件绑定属性，2.子组件通过props接收。

唯一不同的是Vue3组合式API的props为defineProps()，与Vue2的选项式API的props：{}略有不同。

至于为什么不同，跟Vue3的setup有关。只是写法不同，底层还是一样的。

子传父

代码演示效果：

父组件代码：

<script setup>
import { ref } from 'vue'
import SonCom from '@/components/SonComponentOne.vue'

const testNumber = ref(100)
const changeTestNumber = (newTestNumber => {
    testNumber.value = newTestNumber
})


</script>

<template>
<div>
    <h1> 父组件 - {{ testNumber }}</h1>
    <SonCom 
    @changeTestNumber="changeTestNumber"
    :testNumber="testNumber">
</SonCom>
</div>
</template>

<style scoped>

</style>

子组件代码：

<script setup>

const props = defineProps({
    testNumber: Number
})

const emit = defineEmits(['changeTestNumber'])

const parentComponentFunction = () => {
    emit('changeTestNumber', 999)
}

</script>

<template>
<h2>子组件 - {{ testNumber }} </h2>
<button @click="parentComponentFunction">子传父</button>
</template>

<style scoped>

</style>

总结：

步骤还是与Vue2一样，1.父组件中给子组件绑定事件；2.子组件内部通过emit方法触发事件