【Vue.js 牛刀小试】：第十章 - 组件间的数据通讯

时间 2019-11-07

原文原文链接

系列目录地址

前言

在上一章的学习中，咱们继续学习了 Vue 中组件的相关知识，了解了在 Vue 中如何使用组件的 data、prop 选项。在以前的学习中有提到过，组件是 Vue 中的一个很是重要的概念，咱们经过将页面拆分红一个个独立的组件，从而更好地实现代码复用，使咱们的代码更加简洁，容易维护。既然在 Vue 中咱们会大量的使用到组件，一定会涉及到组件之间的通讯，那么本章咱们就来学习，如何实现组件间的数据交互。html

仓储地址：Chapter02-Bronze Component's Communicationvue

干货合集

1、父组件 => 子组件node

在上一章的时候，咱们有提到过，咱们可使用 prop 选项在组件中定义一些自定义特性，当有值传递给 prop 特性时，那个 prop 特性就变成了那个组件实例的一个属性，此时咱们就能够从组件上获取到接收的值。所以，这里咱们就能够在使用子组件时经过 v-bind 指令动态的绑定一个 prop 特性，从而接收到父组件传递的值。git

能够看到，在下面的示例代码中，咱们在子组件中经过 v-bind 指令绑定了一个 prop 特性 parenttitle，用来接收父组件 data 选项中的 title 属性，以后经过 watch 监听属性监听绑定的 parenttitle 属性，从而同步更新子组件 data 选项中的 content 属性值。程序员

<body>
    <div id="app">
        <h4>
            请输入须要传递给子组件的值：<input type="text" v-model="title" />
        </h4>

        <hr />

        <child-node v-bind:parenttitle="title"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h4>
            Vue 实例中的属性值为：{{content}}
        </h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } } }) </script>
复制代码

2、子组件 => 父组件github

在 Vue 中存在着一个单向的下行绑定，父级组件的数据变动能够影响到子集组件，反过来则不行。在实际开发中可能会遇到当子组件的数据更新后，须要同步更新父组件的状况，那么这时咱们应该怎么作呢？编程

既然没办法直接经过修改 prop 选项中的属性进行更新父组件，不如让咱们换一个思路思考。咱们想要实现的效果，无非是当子组件数据变动时可以同步引发父组件的变动，那么，咱们是否是能够在子组件数据发生变化后，触发一个事件方法，告诉父组件我数据更新了，父组件只须要监听这个事件，当捕获到这个事件运行后，再对父组件的数据进行同步变动不就能够了，整个的示意流程以下。 app

那么，如何才能实现事件监听呢？

嗯，Vue 已经帮咱们实现好了解决方案。咱们可使用 v-on 事件监听器监听事件，经过 $emit 去触发当前实例上的事件。固然，这里的事件能够是 Javascript 中的原生 DOM 事件，也能够是咱们自定义的事件。post

例如，在下面的代码中，当我点击传递数据按钮后，触发了子组件的 func 方法，在 func 方法中触发了子组件实例上的 show 事件，并把 input 框中的值做为参数进行传递。这时，咱们在使用到子组件的地方就能够经过 v-on(@) 指令监听这个 show 事件，从而获取到传递的参数，并触发父组件的监听事件。学习

<body>
    <div id="app">
        <h4>
            子组件中的属性值为：{{msg}}
        </h4>

        <hr />

        <child-node @show="showMsg"></child-node>
    </div>
</body>

<template id="child">
    <div>
        <h4>
            请输入须要传递给父组件的值：<input v-model="childMsg" type="text" />
            <button @click="func">传递数据</button>
        </h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '', msg: '', }, methods: { showMsg(data) { this.msg = data } }, components: { 'childNode': { template: '#child', data() { return { childMsg: '' } } methods: { func() { this.$emit('show', this.childMsg) } }, } } }) </script>
复制代码

总结

这一章主要介绍了组件之间进行数据通讯的两种最经常使用的方式，对于子组件获取父组件数据，通常是采用组件的 prop 选项向子组件传递数据；而父组件获取子组件数据，则是采用事件监听的方式。在实际使用中，组件的通讯方式还有 .sync、listeners、slot-scope 等等，这里就先不介绍了，嗯，其实就是我还不会，哈哈，先学习掌握这两种最多见的方式，其它的方式就先放到后面再学习吧。

参考

一、Vue的事件解读

二、Vue事件解读之 emit

三、Vue.js 父子组件通讯的1212种方式

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712