【金秋打卡】第18天-vue3.0实现todolist

第一模块

课程名称：vue3.0实现todolist

章节名称：

• 4-5 父子组件传参

讲师姓名：五月的夏天

第二模块

课程内容(概述)

1、讲解父组件如何传参给子组件，子组件如何传参给父组件

第三模块

介绍

vue3.0和vue2.0父子传参时略有区别，因为在setup函数中无法使用this指向组件实例，所以，在子组件中，可以在setup起点函数中接收到props和{emit}参数，即：setup(props, { emit }){}，依此来实现父子传值

编码

子组件传递给父组件是通过setup中的ctx.emit分发事件的方式传递参数

<!-- 父组件 Home.vue -->
<template>
    <div>
        --------------------------
        <!-- 父组件传参给子组件通过动态绑定属性的方式，子组件在props里接收 -->
        <About :message="message" @on-send="getParentParams" />
        
        <p>子组件传递的参数：{{ parentMessage }}</p>
        --------------------------
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'About',
    setup() {
        const message = ref('这是传递给子组件的参数值')
        const parentMessage = ref(null)
        
        const getParentParams = (result) => {
            parentMessage.value = result.message
        }
        return {
            message,
            parentMessage,
            getParentParams
        }
    }
})
</script>

<!-- 子组件About.vue -->
<template>
    <div>
        --------------------------
        <p>父组件传递的参数：{{ childMessage }}</p>
        --------------------------
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'About',
    props:{
        message: {
            type: String
        }
    },
    setup(props, ctx) {
        // 接收父组件数据
        const childMessage = ref(null)
        childMessage.value = props.message
        
        ctx.emit('on-send', { message: '这是传递给父组件的数据' })
        
        return {
            childMessage
        }
    }
})
</script>

第四模块

学习截图