Vue3中props和emit怎么使用

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

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

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

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

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

在上面可以看见传进来的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的使用方法。
一、props使用方法
1.1 props的定义
通过在组件选项中添加props属性定义需要接受的数据类型和数据格式。
1.2 props的传递
使用组件时,从父组件向子组件传递数据时,需要显示地在子组件标签上添加v-bind属性,同时还需要子组件中添加props属性来接收数据。
1.3 props的校验
使用Vue3提供的验证功能,可以帮助开发者在组件开发过程中更好地掌控props的输入值。
二、emit使用方法
2.1 emit的定义
emit是Vue3中的一个自定义事件机制,通过该机制,子组件可以将数据传递给父组件。
2.2 emit的触发
在子组件中使用$emit方法可以传递数据以及触发指定的事件,从而实现与父组件的数据交互。
2.3 emit的监听
在父组件中使用v-on指令来监听子组件触发的事件,并且指定回调函数以处理子组件传递过来的数据。
总结:
Vue3中props和emit的使用方法,可以使开发者更加优雅地编写高质量的组件。本文介绍了props和emit的基本使用方法,同时也讲述了如何进行验证和监听,以及与父子组件之间的数据交互。
随着Vue3框架的不断升级,我们相信在未来的开发中,会有更多更好的使用props和emit的方法被发现。作为开发者,只有不断学习和实践,才能在行业中立于不败之地。