Vue 组件传参的几种方式

您所在的位置:网站首页 vue传参的几种方式 Vue 组件传参的几种方式

Vue 组件传参的几种方式

2023-08-29 09:26| 来源: 网络整理| 查看: 265

一、props 传参 子组件定义 props 有三种方式:

/ 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: String} // 第三种对象嵌套对象方式 props: { xxx: { //类型不匹配会警告 type: Number, default: 0, required: true, // 返回值不是 true,会警告 validator(val) { return val === 10} } }

第三种对象默认支持 4 种属性,并且都是非必填的。可以随意使用 父组件传参的俩种方式: 第一种静态属性传参 注意: 在不定义 props 类型的情况下 props 接受到的均为 String。 当 props 属性指定为 Boolean 时,并且只有属性 key 没有值 value 时接受到的是 true

第二种动态属性传参 注意: 需要区分非简写形式传入的值是对象,则会对应 props 中多个值 会保留传入值的类型 如果是表达式则获取到的是表达式的计算结果

二、attrs 和listeners $attrs $attrs 会获取到 props 中未定义的属性(class 和 style 属性除外),支持响应式。常用的场景有俩种:

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个,而平常封装的时候用的最多的也就一俩个。 属性默认是添加在父组件上的,有时候想把多余的属性添加在子组件上(可以结合 inheritAttrs: false 属性,让父属性不接受多余的属性)

$listeners 定义的事件都在子组件的根元素上,有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

三、$emit 通知 Vue 默认有 $on $emit $once $off 几种方法来实现发布订阅模式,这也应用在了组件传参上。在组件上添加的特殊方法 @abc=“methods” 就相当于使用了 $on 来监听这个方法。因此组件内可以使用 $emit 来进行通知。 这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值 答案有俩种,一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值

四、v-model 这个其实是一种通过 emit,on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

// 写法 1 { model: { prop: 'value', event: 'update:a', }, methods: { a() { this.$emit('update:a', 1)} } } // 写法 2 { props: ['a'] methods: { a() { this.$emit('update:a', 1)} } } // 写法 3 // 1. 事件名必须是 update: + 属性名 // 2. 参数不能是表达式,最好是 data 里面的属性 { props: ['a'] methods: { a() { this.$emit('update:a', 1)} } }

五、插槽

123 {{slot.user}} {{person}}

六、$refs, $root, $parent, $children $root 获取根组件 $parent 获取父组件 $children 获取子组件(所有的子组件,不保证顺序) $refs 组件获取组件实例,元素获取元素

七、project / inject 注意:注入的值是非响应的

{ project() { return { parent: this } } } { // 写法一 inject: ['parent'] // 写法二 inject: { parent: 'parent' } // 写法三 inject: { parent: { from: 'parent', default: 222 } } }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3