返回顶部
首页 > 资讯 > 精选 >Vue3中props和emit怎么使用
  • 819
分享到

Vue3中props和emit怎么使用

2023-07-05 17:07:09 819人浏览 安东尼
摘要

这篇文章主要介绍“vue3中props和emit怎么使用”,在日常操作中,相信很多人在Vue3中props和emit怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中props和emit怎么使用

这篇文章主要介绍“vue3中props和emit怎么使用”,在日常操作中,相信很多人在Vue3中props和emit怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中props和emit怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

作用:父组件通过 props 向下传递数据给子组件;

用途:当有一种类型的组件需要被使用多次,每一次的调用都只是特定的地方不同,就好像一张个人简介表,每次填的人的信息都不同,但是结构都是一样的。

用法1(不指定类型的简单接受):

在父组件里面引入子组件,通过子组件的标签属性传递参数,在子组件里面定义一个props选项进行接收使用,要注意在子组件里面不需要在props以外的地方事先定义

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

在上面可以看见传进来的age是一个字符串类型,如果想要让传进来的值自动加1不能在子组件使用时里面+1,如下图所示会变成字符串加法241

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

 正确的解决方案是在父组件进行传参时就要进行使用v-bind进行动态绑定,又或者可以使用一个冒号:(简写形式),作用都是运行引号里面的表达式返回运行结果,如下图所示

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

用法2(接受同时进行类型限制):

指定传进来的参数的类型,这里假如传进来类型和指定的类型不一样时会优先以传进来的类型为准,并给出警告。

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

用法3(接受同时类型限制+默认值指定):

指定类型后还有两个选项,一个是指定是否必要,一个是没有传时的默认值

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

注意:

传进来props元素是不能更改的,否则会报错,如果需要修改应该用一个新的变量去接受它再修改,如下图所示,因为props的优先级是高于return的,所以this.age的内容会提前准备好 

另外,经过测试,这个方法只能在data里面用,无法在setup里面用

Vue3中props和emit怎么使用

emit的使用

setup里面有两个参数props和context

如下图所示,其中props就是和上面说的一样时父组件向子组件传递的信息,如右下图所示

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

现在重点来到emit,emit是context中的一个东西

作用:用来触发父组件里面绑定的函数并可以传参回父组件

如图父组件APP.vue里面的配置,在子组件<StDent/>标签里面绑定了一个函数xxx,并传了一个参数xxx1给了子组件。 并且绑定的函数xxx1还有一个参数要输入。

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

 此时来到子组件这里,子组件里面用一个按钮绑定了一个事件用来触发父组件的事件xxx1并且传了一个字符串“++”回去,

Vue3中props和emit怎么使用

Vue3中props和emit怎么使用

 最终得到以下的效果,每点击一次子组件StDent里面的按钮,父组件里面的一个字符串属性就会自动添加两个+并显示出来 

Vue3中props和emit怎么使用

emit总结:经过上述例子,我们只需要知道emit是可以让子组件去触发父组件的函数这一点就够了

到此,关于“Vue3中props和emit怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: Vue3中props和emit怎么使用

本文链接: https://www.lsjlt.com/news/353858.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue3中props和emit怎么使用
    这篇文章主要介绍“Vue3中props和emit怎么使用”,在日常操作中,相信很多人在Vue3中props和emit怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中props和emit怎么使用...
    99+
    2023-07-05
  • vue3中使用ref和emit来减少props的使用示例详解
    目录前言示例示例1示例2前言 在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信。现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用...
    99+
    2024-04-02
  • Vue3中SetUp函数的props和context参数怎么用
    第一个参数props:props是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接...
    99+
    2023-05-22
    Vue3 setup props
  • Vue 关于$emit与props的使用示例代码
    目录一、props 和 $emit二、示例一、props 和 $emit 1、子组件向父组件传值,通过$emit 事件向父组件发送消息,将自己的数据传递给父组件。 2、props 可...
    99+
    2024-04-02
  • vue3中emit('update:modelValue')使用简单示例
    父 <template> <TestCom v-model="test1" v-model:test2="test2"></TestCom> ...
    99+
    2024-04-02
  • VUE3的Non-Props属性怎么用
    本篇内容介绍了“VUE3的Non-Props属性怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. 概述墨菲定律告诉我们:人总是容易犯...
    99+
    2023-06-28
  • vue3中怎么使用props和emits并指定其类型与默认值
    defineProps 的使用defineProps在使用的时候无需引入,默认是全局方法。在 js 开发的 vue3 项目中使用const props = defineProps({ attr1: { type: String,...
    99+
    2023-05-19
    Vue3 props emits
  • vue3中setup函数的参数props和context怎么配置
    这篇文章主要介绍了vue3中setup函数的参数props和context怎么配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中setup函数的参数props和con...
    99+
    2024-04-02
  • vue中$emit怎么用
    这篇文章主要为大家展示了“vue中$emit怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中$emit怎么用”这篇文章吧。在vue中,“$emit”用于触发当前实例上的事件,附近参数...
    99+
    2023-06-29
  • vue3中使用props和emits并指定其类型与默认值
    目录前言defineProps 的使用defineEmits 的使用总结前言 本文主要描述 vue3 中 defineProps 与 defineEmits 分别在 JS 环境和 T...
    99+
    2023-05-14
    vue3 props和emits vue props 对象 默认值 vue3中的props
  • props怎么在react中使用
    这篇文章给大家介绍props怎么在react中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。组件的props( props是一个对象 )作用:接收传递给组件的数据特点:可以给组件传递任意类型的数据props是只读的...
    99+
    2023-06-14
  • 深入了解Vue3中props的原理与使用
    目录前言介绍原理前提创建组件实例对象初始化Props操作创建proxy对象去获取Propsprops作为参数传入setup将proxy挂载到render上总结前言 props指父组件...
    99+
    2023-05-19
    Vue3 props原理 Vue3 props使用 Vue3 props
  • vue3如何使用watch监听props中的数据
    目录情况一:监听 props 中基本数据类型情况二:监听 props 中引用数据类型且父组件不改变地址指向情况三:监听 props 中引用数据类型且父组件改变地址指向总结写在最后情况...
    99+
    2022-11-13
    vue3监听props数据变化 vue3 监听props vue props监听
  • VUE3之Non-Props属性的具体使用
    目录1. 概述2.Non-Props 属性2.1 初识Non-Props 属性2.2 不想把Non-Props 属性 渲染到最外层标签2.3Non-Props 属性的使用场景2.4 ...
    99+
    2024-04-02
  • vue3中provide和inject怎么使用
    本篇内容主要讲解“vue3中provide和inject怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3中provide和inject怎么使用”吧!前言:在父子组件传递数据时,通常...
    99+
    2023-06-21
  • vue3中watch和watchEffect怎么使用
    这篇文章主要讲解了“vue3中watch和watchEffect怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3中watch和watchEffect怎么使用”吧!一、watch...
    99+
    2023-06-21
  • vue3中ref和reactive怎么使用
    这篇“vue3中ref和reactive怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3中ref和reacti...
    99+
    2023-07-05
  • Vue3中SetUp的参数props和context实例分析
    本篇内容介绍了“Vue3中SetUp的参数props和context实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...
    99+
    2024-04-02
  • vue3父子组件传值中props使用细节浅析
    目录setup函数的参数一、父组件要给子组件传值时,可以通过props来完成组件的通信二、子组件给父组件传值总结setup函数的参数 它主要有两个参数: 第一个参数:props :父...
    99+
    2024-04-02
  • Vue中props怎么用
    这篇文章主要为大家展示了“Vue中props怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中props怎么用”这篇文章吧。前言:在Vue中通过props,可以将原本孤立的组件串联起来...
    99+
    2023-06-21
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作