Vue组件间的通信

前言：本文主要介绍在Vue中组件与组件如何进行信息传递。分为三部分：

父组件向子组件

子组件向父组件

非父子组件通信

一、父组件向子组件通信（props）

①、父组件向子组件传递字符串

<template>    <div id="m-dialog">        <!--         该种方法“只能传递字符串”，        将child的data中的value = "str";不需要父组件data中有数据        -->        <child value="传递固定字符串"></child>    </div></template>

Vue.component("child", {// 获取value的依赖props:["value"],template: '<span>{{ value }}</span>'});new Vue({// 这里的el可视为父组件// 所以下面这个片段是放在#m-dialog里面的el:"#m-dialog"});

②、父组件向子组件传递数据

<div id="m-dialog"><!-- 将组件的数据state与父组件的数据flag绑定在了一起执行 vue1.flag= false 会对组件数据进行重新渲染 --><child v-bind:state="flag"></child></div>

Vue.component("child", {// 获取value的依赖props:["state"],template: '<span>{{ state }}</span>'});var vue1 = new Vue({// 这里的el可视为父组件// 所以下面这个片段是放在#m-dialog里面的el:"#m-dialog",data: {flag: true}});

使用props传递值的时候可能有多个参数，这时候需要注意顺序问题

详情请点击

二、子组件向父组件通信($emit())

因为父子组件的数据绑定是单向，故子组件的数据变化不会影响到父组件，故需要通过事件的监听来主动通知父组件对应子组件的数据变化

<div id="m-dialog"><!-- v-on:cancle="other"表示如果触发组件中的cancle事件则连带触发父组件中的other时间 --><child v-on:cancle="other"></child></div>

Vue.component("child", {template: '<button v-on:click="cancle">我是按钮，点我触发父组件事件</button>',methods: {cancle: function() {// 与父组件通信一定要加上这句话this.$emit('cancle');}}});var vue1 = new Vue({// 这里的el可视为父组件// 所以下面这个片段是放在#m-dialog里面的el:"#m-dialog",data: {flag: true},methods: {other: function() {alert();}}});

三、非父子组件通讯

// 建立一个空容器var bus = new Vue()// 在组件 B 创建的钩子中监听事件// $on用于监听事件bus.$on('event', function (id1,id2) {  // ...  alert(a);// 弹出1  alert(a);// 弹出2})// 触发组件 A 中的事件// 触发了event事件, 后面为参数bus.$emit('event', 1, 2);

如果是比较庞大的组件间通讯可以使用vuex,我个人建议不要为了用 Vuex 而用 Vuex，除非你的项目很大，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。当然还是要根据自己的业务场景的来决定，总之还是那句话，不要为了用 Vuex 而用 Vuex

友情推荐：Vue 进阶教程之：非父子组件通信方法（非Vuex） 传送门

瞎谈：刚接触vue，学习的东西很多，如有错误，敬请提醒，共同进步~~