Vue3通透教程【九】父子组件通讯一目了然

这篇具有很好参考价值的文章主要介绍了Vue3通透教程【九】父子组件通讯一目了然。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


🌟 写在前面

专栏介绍:
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的,随着 Vue 框架不断的被认可,现如今的 Vue 框架已经是前端工程师必备的技能了,记得尤大大开发 Vue 的初衷,为了让自己的开发工作更加便捷,也希望这个框架能让更多人的开发工作变得轻松;现如今 Vue 框架做到了,尤大大做到了,当然在 20 年的 9 月 18 日,Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布!如今已经过去了两年多的时间,更多的公司选择了Vue3技术,所以凉哥也在这个时候为大家出这份专栏,本专栏将帮助大家掌握Vue3+TS技术,提升自己竞争力!点击链接订阅本专栏吧——Vue3通透教程【从零到一】

温故知新:
上篇文章文章中我们为大家介绍了我们Vue3中通过ref获取和操作DOM,以及我们可以通过ref获取组件,但是需要通过defineExpose函数在子组件中进行暴露我们方可在父组件获取数据和调用方法,本篇内容呢将带领大家掌握组件通讯,实现组件中的数据获取!让我们 let’s coding!


🌟 父 👉 子

大家应该都比较熟悉Vue2中的父组件向子组件传值的方式,就是通过在子组件的标签上设置自定义属性,然后子组件通过 props 接受属性的值即可。其实在我们组合式API中也为大家推出了跟props用法极为相似的API那就是——defineProps函数,用法如下:

1)同于Vue2的用法我们传值时都需要在子标签中设置自定义属性
2)子组件中 defineProps 的写法和props类似
3)我们在defineProps中接收的参数跟Vue2props一样都可以直接在模板中进行使用,但是如果我们想在JS中使用需要用变量接收defineProps,然后通过变量访问里面的数据!

子组件 son.vue 我们来通过 defineProps 来接受父组件传递的参数并且在模板中进行使用;

<template>
    <div>
        我是{{ sonName }}儿子
    </div>
</template>

<script setup>
defineProps({
    sonName: {
        type: String,
        defaule: ''
    }
})
</script>

父组件 app.vue 中引入子组件,并在子组件标签中设置自定义属性 sonName 并传递参数“小”给子组件

<template>
    <p>您好,</p>
    <son :sonName="sonName"></son>
</template>
<script setup>
import { ref } from "vue";
import son from "./son.vue";
let sonName = ref('小')
</script> 

vue3父子组件通信,Vue3通透教程【从零到一】,vue.js,前端,javascript
还记得我们上面说的第三条么,我们目前是在模板中进行使用是没有任何问题的,但是如果我们在子组件直接接收到参数后,进行打印大家可以尝试一下,其实会报错,不知道大家能不能回想到我们前面讲setup语法糖的时候跟大家提及到的setup中只能获取顶级变量;所以这里想要在js中直接打印我们需要声明变量来接收 defineProps。大家自行尝试一下!但是我们直接在模板中使用是没有问题的。

vue3父子组件通信,Vue3通透教程【从零到一】,vue.js,前端,javascript


🌟 子 👉 父

通过上面的小节大家掌握了我们Vue3中父传子组件通讯的方式,其实子传父的用法也是类似于Vue2的方式,下面我们就来一下吧!其实也是通过子组件调用父组件的自定义方法并传递参数,我们在父组件的自定义方法中来获取参数,从而实现子组件向父组件传值,注意我们之前Vue2中是通过this.$emit 而我们的Vue3种setup没有this,这就用到了我们下面的新函数——defineEmit函数来获取emit函数。

1)在父组件app.vue中我们在子组件标签上注册自定义事件;
2)子组件中我们通过defineEmits函数来获取要触发的自定义事件
3)我们声明变量emit来接收defineEmits函数,并且通过emit即可调用函数并且传参;

下面我们就在编写一个小案例,还是实现一个点赞的功能,只不过我们讲点击按钮放在子组件,点击后触发父组件的自定义事件并且传递参数实现点赞功能,熟悉我们的子组件向父组件传参!

//son.vue
<template>
    <div>
        <button @click="zan">+10</button>
    </div>
</template>

<script setup>
const emit = defineEmits(['chage'])
const zan = () => {
    emit('chage',10)
}
</script>

//app.vue
<template>
    <p>您好,几何心凉</p>
    总赞数{{ num }}
    <son @chage="fun"></son>
</template>
<script setup>
import { ref } from 'vue';
import son from './son.vue'

let num=ref(0)

const fun=value=>{
    num.value+=value
}

</script> 

vue3父子组件通信,Vue3通透教程【从零到一】,vue.js,前端,javascript


🌟 写在最后

这篇文章为大家介绍了我们Vue3中的父子组件通讯,你是否学会了呢,小伙伴一定记的尝试哦,大家都知道我们出了父子组件通讯之外呢,还是有很多兄弟组件,爷孙组件通讯,那下篇文章中我们将为大家介绍跨级组件通讯!各位小伙伴让我们 let’s coding!

本期推荐

vue3父子组件通信,Vue3通透教程【从零到一】,vue.js,前端,javascript

原创不易,还希望各位大佬支持一下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
文章来源地址https://www.toymoban.com/news/detail-789329.html

到了这里,关于Vue3通透教程【九】父子组件通讯一目了然的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue父子组件通讯方式及实现

    68. Vue父子组件通讯方式及实现 1. props和$emit 父组件通过 props 向子组件传递数据,子组件通过 $emit 触发父组件定义的事件来传递数据。 父组件: 子组件: 2. $parent和$children 父组件可以通过 $children 属性获取到所有子组件的实例,并通过 $parent 属性获取到自己的父组件实例。

    2024年02月10日
    浏览(37)
  • 如何一目了然地监控远程 Linux 系统

    动动发财的小手,点个赞吧! Glances 是一款免费的开源、现代、跨平台、实时 top 和类似 htop 的系统监控工具,与同类工具相比,它提供了先进的功能,并且可以在不同的模式下运行:作为独立模式、客户端/服务器模式,并在 Web 服务器模式下。 考虑到Web服务器模式,您不一

    2024年02月14日
    浏览(37)
  • 图表参考线,数据对比一目了然_三叠云

    路径 仪表盘 仪表盘设计 功能简介 新增 「参考线」 功能。 参考线是在单个图表组件中添加的一条水平虚线,也可以配置两条线形成的参考区间,它表示该水平线上纵坐标值的大小。 使用场景: 通过辅助线的设置,可以将实时数据跟辅助线进行比较,查找与辅助线的差距,

    2024年02月08日
    浏览(41)
  • 一目了然凉哥为大家倾力打造的付费专栏

    大家好,我是几何心凉,欢迎来到我的付费专栏系列,本专栏将深入介绍 Vue 3 和 Vite,以及如何在 TypeScript 的帮助下构建现代化的 Web 应用程序。 Vue 是一个流行的 JavaScript 框架,它允许开发人员构建高性能的用户界面,并且具有丰富的生态系统。Vue 3 是 Vue 框架的最新版本,

    2024年02月06日
    浏览(71)
  • 一目了然,小姐姐用动图展示 10 大 Git 命令

    来源:机器之心 git merge、git rebase、git reset、git revert、git fetch、git pull、git reflog……你知道这些 git 命令执行的究竟是什么任务吗? 如果你还有些分不清楚,那千万不能错过这篇文章。 在本文中,熟知 JavaScript、TypeScript、GraphQL、Serverless、AWS、Docker 和 Golang 的 21 岁年轻软件顾

    2024年01月19日
    浏览(40)
  • 将多个DIV放在一行显示的三种方法(超简洁,一目了然)

    1.先设置一个DIV,里面套4个子div,并设置样式,width用像素或者%百分比表示时: 2.width用vh表示时,父div中要加上position: fixed;: 可以注意到子div无需加display: inline-block; 也可以实现。 – 当width为40vh时,此时一行可装下: 当width为50vh时,此时一行装不下,自动换行: **注意:

    2024年02月16日
    浏览(50)
  • Vue3通透教程【三】Vue3代码初体验找不同

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月13日
    浏览(30)
  • Vue3通透教程【十一】初探TypeScript

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2023年04月09日
    浏览(36)
  • 【vue3】vue3中父子组件传参:

    一、父传子: 【1】父组件传值: 【2】子组件接收: 二、父调用子方法: 【1】父组件调用: 【2】子组件暴露: 三、子组件发送emit方法给父组件: 【1】父组件: 【2】子组件调用:

    2024年02月13日
    浏览(38)
  • 如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

    1.下载一个Hbuilderx https://www.dcloud.io/hbuilderx.html ,根据自己电脑64位 32位安装就好,很简单 2.选择文件→新建→项目  3.选择uniapp的一个快捷带+号的项目。底部导航图标换自己需要的即可 4页面配置的主要四大地方,目前只需了解就行            manifest.json里有些操作需

    2024年02月09日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包