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

目录
  • 作用：父组件通过 props 向下传递数据给子组件；
  • 用法1（不指定类型的简单接受）:
  • 用法2（接受同时进行类型限制）：
  • 用法3(接受同时类型限制+默认值指定)：
  • 注意：
  • 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使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue组件命名和props命名代码详解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="https://cdn.jsdelivr.n

  • 浅谈Vue初学之props的驼峰命名

    在vue的中文官网有这样的说明:HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名. 重申一次,如果你使用字符串模板,那么这个限制就不存在了. 以以下代码为例: 1.当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式. 2.当组件中template及props等使用字符串模板

  • Vue中props组件和slot标签的区别

    在 Vue 中,props 和 slot 都是组件之间进行通信的机制,它们的作用和应用场景有一些区别: props 是一种组件的数据传递机制,通过在父组件中以属性的形式向子组件传递数据.子组件接收这些数据,并可以进行相应的处理和渲染.props 在组件开发中非常常见,可以让我们更加方便和灵活地进行组件间的数据传递. slot 是一种插槽机制,用于在组件内部放置一些用户自定义的内容或者组件.通俗来说,可以把 slot 看成是组件内部的一个容器,可以在组件使用时向其中动态插入内容. slot 可以用

  • Vuex 命名空间 namespaced的使用

    在项目中,如果需要用到Vuex,可以将 store 分割成多个模块(module),每个模块拥有自己的 state.mutation.action.getter,这样你的模块具有更高的封装度和复用性,此时就用到了命名空间这个概念.( 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应.) 1.如何使模块成为一个命名空间模块? 你可以在单个模块中通过添加namespaced:tr

  • Angular中$broadcast和$emit的使用方法详解

    Angular中$broadcast和$emit的使用方法详解

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: <script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", function($scope)

  • vue3中的透传attributes教程示例详解

    vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

  • vue3中vue.config.js配置及注释详解

    vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • C++中new和delete的使用方法详解

    C++中new和delete的使用方法详解 new和delete运算符用于动态分配和撤销内存的运算符 new用法:           1.     开辟单变量地址空间 1)new int;  //开辟一个存放数组的存储空间,返回一个指向该存储空间的地址.int *a = new int 即为将一个int类型的地址赋值给整型指针a. 2)int *a = new int(5) 作用同上,但是同时将整数赋值为5           2.     开辟数组空间 一维: int *a = new in

  • MongoDB 中Limit与Skip的使用方法详解

    MongoDB 中Limit与Skip的使用方法详解 一 MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的记录条数. 语法 limit()方法基本语法如下所示: >db.COLLECTION_NAME.find().limit(NUMBER) 实例 > db.col.find({},{"title":1,_id:0}).li

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • PHP中filter函数校验数据的方法详解

    介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • 如何在程序中判断VS的版本(实现方法详解)

    代码如下所示: #include<iostream> using namespace std; int main() { cout << _MSC_VER << endl; return 0; } 在VC6.0中结果为:1200 在VC10.0(VS2010)中结果为:1600 _MSC_VER实际就是 Microsoft visual c++ version(是微软的预定义宏). 具体对应如下: MS VC++ 14.0 _MSC_VER = 1900(VS2015)

  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解)

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace方法的返回值为:一个新的字符串. 3.说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换. 示例代码: <!DOCTYPE html> <html lang

随机推荐