Vue组件传参方式总结

最新推荐文章于 2024-02-26 16:12:46 发布

神小夜

最新推荐文章于 2024-02-26 16:12:46 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： vue 组件传参 props 前端状态管理

本文链接：https://blog.csdn.net/weixin_40693643/article/details/107730088

版权

前端专栏收录该内容

93 篇文章 10 订阅

订阅专栏

// 第一种：数组方式
props: [xxx, xxx, xxx]
// 第二种： 对象方式
props: {xxx: Number, xxx: String}
// 第三种：对象嵌套对象方式
props: {
	xxx: {
		type: Number,  // 类型不匹配会警告
		default: 0,        // 默认值
		required: true, // 声明该参数是否必须传入
		// 自定义校验规则
		validator: function (value) {
	        // 这个值必须匹配下列字符串中的一个
	        return ['success', 'warning', 'danger'].indexOf(value) !== -1
	    }
	}
}

父组件传参有两种方式：
第一种：静态属性传参

<!--props 接受到的均为 String -->
<children xxx="123"></children>
<!-- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true -->
<children xxx></children>

注意：

在不定义 props 类型的情况下 props 接受到的均为 String。
当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true

第二种: 动态属性传参

<!-- prop 接收到 Number 类型的 123-->
<children :xxx="123"></children>
<!-- prop 接收到 Array 类型的 [1, 2, 3]-->
<children v-bind:xxx="[1, 2, 3]"></children>
<!-- prop 会接收到 xxx1 和 xxx2 俩个参数。这种不支持简写形式-->
<children v-bind="{xxx1: 1, xxx2: 2}"></children>

注意：

需要区分非简写形式传入的值是对象，则会对应 props 中多个值
会保留传入值的类型
如果是表达式则获取到的是表达式的计算结果

二： `$attrs` 和 `$listeners`

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

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

三： `$emit`

Vue 默认有 $on $emit $once $off 几种方法来实现发布订阅模式，这也应用在了组件传参上。在组件上添加的特殊方法 @abc=”methods” 就相当于使用了 $on 来监听这个方法。因此组件内可以使用 $emit 来进行通知。

考题：
for 循环的时候如何拿到子组件的传值和 for 中循环的值

<template v-for="item in [1, 2, 3]">
    <children @abc="((val, val2) => getValue(val, item))"></children>
</template>

答案有俩种，一是 $event, 二是闭包。只是需要注意 $event 只能获取到第一个值

四： `v-model`

优点再于同步值方便,写法优雅

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

五：插槽

<template>
    <div>
        <!--默认插槽-->
        <slot></slot>
        <!--另一种默认插槽的写法-->
        <slot name="default"></slot>
        <!--具名插槽-->
        <slot name="footer"></slot>
        <!--传参插槽-->
        <slot v-bind:user="user" name="header"></slot>
    </div>
</template>
<!--使用-->
<children>
    <!--跑到默认插槽中去-->
    <div>123</div>
    <!--另一种默认插槽的写法-->
    <template v-slot:default></template>
    <!--跑到具名插槽 footer 中去-->
    <template v-slot:footer></template>
    <!--缩写形式-->
    <template #footer></template>
    <!--获取子组件的值-->
    <template v-slot:header="slot">{{slot.user}}</template>
    <!--结构插槽值-->
    <template v-slot:header="{user: person}">{{person}}</template>
    <!--老式写法，可以写到具体的标签上面-->
    <template slot="footer" slot-scope="scope"></template>
</children>

六： `$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
        }
    }