为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第18天-vue3.0实现todolist

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

2022.11.12 00:23 71浏览

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 4-5 父子组件传参

讲师姓名:五月的夏天

第二模块

课程内容(概述)

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

第三模块

介绍

vue3.0vue2.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>

第四模块

学习截图
图片描述
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
学生
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消