vue组件穿方法_Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、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 中多个值

会保留传入值的类型

如果是表达式则获取到的是表达式的计算结果

复制代码

二、

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 只能获取到第一个值

getValue(val, item))">

复制代码

四、v-model

这个其实是一种通过

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

}

}

}

复制代码

八、Vuex

这个相当于单独维护的一组数据，就不过多的说了。