Vue3中props和emit的使用方法详解

 更新时间:2023年03月28日 10:25:36   作者:北岭山脚鼠鼠  
props是Vue中最常见的父子通信方式,使用起来也比较简单,下面这篇文章主要给大家介绍了关于Vue3中props和emit的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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

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

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

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

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

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

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

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

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

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

注意:

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

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

emit的使用

setup里面有两个参数props和context

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

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

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

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

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

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

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

总结

到此这篇关于Vue3中props和emit使用的文章就介绍到这了,更多相关Vue3中props和emit使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现主题切换的多种思路分享

    vue实现主题切换的多种思路分享

    最近一段时间,一直在做主题方面的工作。我们的主题,并不是简单切换一下颜色,或者排版变化这些,而是变化比较大的主题。比如说:主题1和主题2看起来完全不一样,功能甚至都不一样。这样,通过切换css就无法做到了,因此我思考良久,使用了如下2种方法
    2021-06-06
  • vue调试工具没有Pinia模块的简单解决办法

    vue调试工具没有Pinia模块的简单解决办法

    Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • vue3中router路由以及vuex的store使用解析

    vue3中router路由以及vuex的store使用解析

    这篇文章主要介绍了vue3中router路由以及vuex的store使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue实现一个懒加载的树状表格实例

    vue实现一个懒加载的树状表格实例

    这篇文章主要介绍了vue实现一个懒加载的树状表格实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • VUE中的filters过滤器使用方法

    VUE中的filters过滤器使用方法

    这篇文章主要介绍了VUE中的filters过滤器使用方法,文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载 、组件过滤器展开内容,具有一定的参考价值组要的小伙伴可以参考一下
    2022-03-03
  • vuex + keep-alive实现tab标签页面缓存功能

    vuex + keep-alive实现tab标签页面缓存功能

    这篇文章主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • Vue 计数器的实现

    Vue 计数器的实现

    这篇文章主要介绍了Vue 计数器的实现,主要利用HTML实现步骤现在页面上简单实现一个计数器,内容简单且详细,需要的朋友可以参考一下
    2021-10-10
  • vue使用codemirror的两种用法

    vue使用codemirror的两种用法

    这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue基础之详解ElementUI的表单

    vue基础之详解ElementUI的表单

    这篇文章主要为大家详细介绍了vue基础之ElementUI的表单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

    vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

    本文通过示例代码介绍了vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的相关操作,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
    2024-07-07

最新评论