vue组件通信

Vue.js允许正向传值，也就是父组件传值给子组件。正向传值不需要条件触发，是主动的，逆向传值则是不允许的，需要主动触发，也即需要主动抛出自定义事件去监听。
语法

this.$emit('event',val)

$emit为实例方法，用来触发事件监听。其中，参数event代表自定义事件名称，参数val代表通过自定义事件传递的值，注意这里的val为可选参数。
下面通过代码看一下如何使用自定义事件，父组件代码如示例所示。
示例

<template>
<div class="page">
<h1>父组件</h1>
<p>子组件传递的数据: {{ message }}</p>
<child @change='getVal'></child>
</div></template>
<script>
import child from "./child";
export default {
data() {
return { message: "" };
},
components: { child },
methods: {
getVal: function(val) {
this.message = val;
}
}
};
</script>
<style scoped>
</style>

子组件代码如示例所示。
示例

<template>
<div class="page">
<h1>子组件</h1>
<button @click='fn'>单击子组件传值父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
cMsg: " child要传递的信息"
};
},
methods: {
fn: function() {this.$emit("change", this.cMsg);
}
}
};
</script>
<style scoped>
</style>

slot

slot 的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示（slot还有一个形象的名字“插槽”）。slot就好比组件开发时定义的一个参数（通过name值来区分），如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。
slot分为以下两类。
➢ 匿名slot
➢ 具名slot

匿名slot从字面意思理解就是没有名字的插槽，特点是可以放任何内容。
首先设想一个弹出提示框的场景，提示框都包括头部、中间内容和底部三部分，一般情况下头部、底部都是固定不变的，改变的只是中间内容，中间内容可以任意放置。下面通过示例来看一下匿名slot的使用。首先新建popup组件，在组件中写入以下代码。
示例

<template>
<div class="page">
<p>头部区域</p>
<slot>如果没有分发内容，则显示默认提示</slot>
<p>底部区域</p>
</div>
</template>
<script>
export default {
data() {
return {};
},
components: {}
};
</script>
<style scoped>
</style>

在父组件中引用popup组件

计算机主板上有各种插槽，有CPU的插槽，有显卡的插槽，有内存的插槽，有硬盘的插槽，不可能把显卡插到内存的位置上。具名slot就是每个slot都有名字，不能随意替换。
具名slot可以用一个特殊属性name来配置如何分发内容，多个slot可以有不同的名字，具名slot将匹配内容片段中有对应slot特性的元素。具名slot的使用请查看以下代码，首先新建computer组件，代码如示例所示。

<template>
<div class="page">
<computer>
<div slot="CPU">Intel Core i7</div>
<div slot="GPU">GTX980Ti</div>
<div slot="Memory">Kingston 32G</div>
<div slot="Hard-drive">Samsung SSD 1T</div>
</computer>
</div>
</template>
<script>
import computer from "./parts";
export default {
data() {
return {};
},
components: { computer }
};
</script>
<style scoped>
</style>

组件不仅仅是把模板的内容进行复用，更重要的是组件间的通信，通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据以及参数，子组件接收到参数后再根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。

为什么子组件的数据要从父组件传递过来呢，因为大型项目中组件很多，而且大部分数据都由后台数据库提供，如果每个组件都向服务器申请数据，无疑是比较浪费效率的，开发者去管理这些数据也会很麻烦，所以这里采取的方法是：所有的数据都在页面级的组件中去向服务器申请获得，子组件如果需要数据，可以由父组件将需要的数据传递给子组件，使项目中的数据更利于管理。

在子组件列表项目中，可以发现props中声明的数据与组件data函数返回的数据的主要区别是props中声明的数据来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板（template）及方法（method）中使用。示例2中的数据“message”就是通过props从父级传递过来的，在组件的自定义标签上直接写props的名称，如果要传递多个数据，在props数组中添加项即可。

大多数情况下，传递的数据并不是静态不变的，而是来自父级的动态数据，可以使用v-bind指令来动态绑定props的值，当父组件的数据发生变化时，也会传递给子组件。