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的使用文章来源地址https://www.toymoban.com/news/detail-410046.html

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

到了这里,关于Vue3----props和emit的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(43)
  • Vue组件的嵌套关系;父组件传递子组件props;子组件传递给父组件$emit;自定义事件;案例

    前面将所有的逻辑放到一个App.vue中: 在之前的案例中,只是创建了一个组件App; 如果一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃 肿和难以维护; 所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件; 再将这些组件组合

    2024年02月13日
    浏览(45)
  • 父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

    vue3.4增加了 defineModel 宏函数,在子组件内修改了 defineModel 的返回值,父组件上 v-model 绑定的变量就会被更新。大家都知道 v-model 是 :modelValue 和 @update:modelValue 的语法糖,但是你知道为什么我们在子组件内没有写任何关于 props 的定义和 emit 事件触发的代码吗?还有在 template

    2024年04月08日
    浏览(80)
  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(54)
  • Vue3 setup tsx 子组件向父组件传值 emit

    需求: Vue3 setup 父组件向子组件传值,子组件接收父组件传入的值;子组件向父组件传值,父组件接收的子组件传递的值。 父组件: parent.tsx : 子组件: TotalPreview.tsx : 页面效果:

    2024年02月13日
    浏览(40)
  • 前端基础(props emit slot 父子组件间通信)

    前言 :如何实现组件的灵活使用,今天学习组件封装用到的props、slot和emit。 目录 props 子组件 父组件 示例代码 slot 示例代码 作用域插槽 emit 示例代码 需要实现在其他组件中使用同一个子组件。 子组件(所谓子组件,就是封装好的组件,供其他组件使用) 子组件定义了so

    2024年02月11日
    浏览(52)
  • vue3-深入组件-组件注册和props更多细节

    定义好的组件需要注册才能被使用。 注册方式有两种 全局注册 局部注册 全局注册 .component() 方法,让组件在当前 Vue 应用中全局可用。 在 main.ts 中 在 vue 中直接使用无需导入 效果: 全局注册的组件可以在此应用的任意组件的模板中使用,所有的子组件也可以使用全局注册

    2024年01月25日
    浏览(52)
  • 两周掌握Vue3(三):全局组件、局部组件、Props

    代码仓库:跳转 本博客对应分支:03 Vue 3 中的全局组件是在应用程序中全局注册的组件,可以在任何地方使用,而不需要在每个组件中都单独注册。 在components目录下创建全局组件MyGlobalComponent.vue: 在App.vue中尝试使用我们定义和注册的全局组件: 效果: 在 Vue 3 中,局部组

    2024年01月18日
    浏览(47)
  • vue3父组件异步props传值,子组件接收不到值问题

    当我们使用vue3进行开发在创建组件的时候,子组件经常需要调用父组件的数据,那么这是就需要vue3的props进行对父组件与子组件通信来达到传值的效果 在使用props进行父子组件通信时,子组件无法成功渲染数据,导致拿到数据为空问题 提示:这里填写问题的分析: 在使用

    2024年02月11日
    浏览(40)
  • Vue3通透教程【十八】TS为组件的props标注类型

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

    2024年02月16日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包