浅入深出Vue：子组件与数据传递

上一篇了解了组件的概念及在使用中须要注意的地方。在面对单个组件逻辑复杂须要拆分时，不免会遇到父子组件之间数据传递的问题。那么咱们来了解一下在父子组件之间进行数据传递时须要遵循哪些约定，以及要注意哪些问题。

如何传递

父组件向子组件在进行传递时，使用的是 prop特性进行传递。

约定

老规矩， 在使用前咱们首先了解应该怎么使用，有哪些约束条件：

1. 子组件的 props中定义要传递的变量名

2. 变量名同组件的命名规范

3. 父组件传值时，须要使用短横线分隔命名

4. 使用 v-bind进行传值

定义

首先在子组件中定义：

// Child.vue

export default {
    name: 'child'
    props: ['teamList']
}

这里使用了驼峰命名，在传值时需注意要转换成短横线分隔命名。

咱们定义了一个 teamList的变量，此时咱们就能够在这个组件中经过 this使用这个变量了（同 data中的数据）。

传值

在父组件中进行传值：

<template>
    <div>
        <child v-bind:teamList="teamList"></child>
    </div>
</template>

父组件中使用 v-bind便可将数据传递下去了。

向子组件传递数据就是这么简单，本质上和 data同样，只是这里单独使用 prop特性将其区分开来。

须要注意的时：

• 经过 prop特性传递下去的数组是 “单向”绑定的，父组件对数组的更新会影响到子组件。所以并不建议子组件对 prop特性中的值进行修改

Js中在传递对象和数组时传递的时引用！所以：当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态

这个特性有利有弊，在某些状况下能够经过这种相似 hack的方式来进行处理。

子组件反向传递

上面说到了，并不建议在子组件中修改 props中的数据。那么当须要向父组件进行某种反馈时怎么办呢？

假设如今咱们有一个登陆弹出框的组件，经过子组件的方式调用了，当咱们登陆成功时该如何通知父组件作出相应的反应呢？

1. 经过自定义事件，子组件调用 this.$emit('事件名', 参数)

2. 使用 v-model 、组件中 model选项与 input事件模拟成 input控件，对父组件中的值进行更新

3. .sync修饰符进行 “双向绑定”

这里只介绍第一种方式，由于后两种方式若羽也没用过几回 o(╯□╰)o

emit使用约定

• 事件名的命名规范同组件

• 父组件在绑定子组件上的自定义事件时，必须彻底匹配事件名，这里不像组件与子组件中使用时是使用的短横线分隔命名，而是彻底匹配。

约定较少，主要注意使用时是和组件不一样的，名称须要彻底匹配。

emit使用

首先咱们在子组件中定义事件,说是定义，不如说是调用。由于是子组件直接在某段逻辑中调用的emit：

// child.vue

export default {
    methods: {
        submit() {
            this.$emit('submitForm', this.data)
        }
    }
}

这里咱们定义了调用的自定义事件名称为 submitForm，那么在父组件中使用：

<!-- parent.vue -->

<template>
    <div>
        <child v-on:submitForm="submit"></child>
    </div>
</template>

<script>
export default {
    methods: {
        submit(data) {
            // 处理逻辑
        }
    }
}
</script>

能够看到这里在使用时， v-on绑定的事件名称是 submitForm而不是 submit-form。

这一点须要注意。

写在后面

这一篇内容较少，由于接下来的入门篇将会用项目实践来更好的演示它们的用法。同时，初学之时也不太建议在用法多样性上关注太多。

在实践中学习、成长

个人博客即将同步至腾讯云+社区，邀请你们一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1vu8349ugeh09