vue组件通信

参照博客：https://www.jianshu.com/p/7df2576a8a2b

方法一、prop和$emit

1.prop--父组件向子组件传值

a.prop大小写： postTitle 等价于 post-title；

b.prop类型：

　　以数组形式：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

　　以对象形式：（通常你希望每个 prop 都有指定的值类型）

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

c.传递静态或者动态prop

<!-- 静态赋值 -->
<blog-post title="My journey with Vue"></blog-post>
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

d.传递的数据可以是字符串、数组、数字、对象、布尔值

//父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2.$emit--子组件向父组件传值（通过事件形式）

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

总结：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

方法二、$parent和 $children与 ref

ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

$parent / $children：访问父 / 子实例。

需要注意的是：这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

我们先来看个用 ref来访问组件的例子：

// 子组件
export default {
  data () {
    return {
      title: '这是子组件的数据'
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
    }
  }
}

// 父组件
<template>
  <children ref="comA"></children> //首先你的给子组件做标记
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // 这是子组件的数据
      comA.sayHello();  // hello
    }
  }
</script>

 用$parent / $children直接访问组件实例

在父组件中
this.$children
在子组件中
this.$parent

方法三、vuex

参照博客：https://segmentfault.com/a/1190000015782272

1.安装vuex

pm install vuex --save

2.在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;

3.接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

import store from './store'//引入store
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

4.配置state、getter、mutation、action

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    showFooter(context) {  //同上注释
        context.commit('show');
    },
    getNewNum(context,num){   //同上注释，num为要变化的形参
        context.commit('newNum',num)
     }
};
  const store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

而在外部组件里进行全局执行actions里面方法的时候，你只需要用执行：

this.$store.dispatch('hideFooter')

或this.$store.dispatch('showFooter')

以及this.$store.dispatch('getNewNum'，6) //6要变化的实参

想要获取state值：

this.$store.state

5.modules 模块化 以及 组件中引入 mapGetters、mapActions 和 mapStates的使用

因为在大多数的项目中，我们对于全局状态的管理并不仅仅一种情况的需求，有时有多方面的需求，比如写一个商城项目，你所用到的全局state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的；像这样的情况我们就要考虑使用vuex中的 modules 模块化了，具体怎么使用modules呢？咱们继续一步一步的走：

首先，在store文件夹下面新建一个modules文件夹，然后在modules文件里面建立需要管理状态的js文件（collection.js 、footerStatus.js），既然要把不同部分的状态分开管理，那就要把它们给分成独立的状态文件了。

而对应的store文件夹下面的index.js 里面的内容就直接改写成：

import Vue from 'vue';
import Vuex from 'vuex';
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'
Vue.use(Vuex);
export default new Vuex.Store({
    modules:{
         footerStatus,
         collection
    }
});

//collection.js
const state={
    collects:[],  //初始化一个colects数组
};
const getters={
  renderCollects(state){ //承载变化的collects
    return state.collects;
  }
};
const mutations={
     pushCollects(state,items){ //如何变化collects,插入items
        state.collects.push(items)
     }
 };
const actions={
    invokePushItems(context,item){ //触发mutations里面的pushCollects ,传入数据形参item 对应到items
        context.commit('pushCollects',item);
    }
};
export default {
     namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
     state,
     getters,
     mutations,
     actions
}

//footerStatus.js
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    showFooter(context) {  //同上注释
        context.commit('show');
    },
    getNewNum(context,num){   //同上注释，num为要变化的形参
        context.commit('newNum',num)
     }
};
export default {
    namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
    state,
    getters,
    mutations,
    actions
}

mapState,mapGetters,mapActions的使用：首先 在需要用的 组件里面先导入 import {mapState,mapGetters,mapActions} from 'vuex';

<template>
  <div class="children1">
    <button class="joinStatus" @click="invokePushItems(item)">加入收藏列 然后跳转到children2页面查看</button>
    <li v-for="(val,index) in arrList" :key="index">
      <h5>{{val.productName}}</h5>
      <p>{{val.price}}</p>
    </li>
  </div>
</template>

<script>
import {mapState,mapGetters ,mapActions} from "vuex";
export default {
  name: "children1",
  data() {
    return {
      item: {
        id: "01",
        productName: "苹果",
        price: "1.6元/斤"
      }
    };
  },
  methods: {
    ...mapActions("collection", [
      //collection是指modules文件夹下的collection.js
      "invokePushItems" //collection.js文件中的actions里的方法，在上面的@click中执行并传入实参
    ])
  },
  computed: {
    // ...mapState({  //用mapState来获取collection.js里面的state的属性值
    //    arrList:state=>state.collection.collects
    // }),
    ...mapGetters("collection", {
      //用mapGetters来获取collection.js里面的getters
      arrList: "renderCollects"
    })
  }
};
</script>

 方法四、eventBus 兄弟组件通信

1.使用 eventBus 首先我们创建一个 bus.js 文件，里面的内容如下

import Vue from 'vue';  
export default new Vue(); 

2.在需要使用 eventBus 的组件中引入上面创建的 bus.js 文件。

import Bus from 'common/js/bus.js';

3.发布Bus消息的组件

Bus.$emit('getTarget', event.target);

4.接收Bus消息的组件

Bus.$on('getTarget', target => {  
    console.log(target);  
});

 5.解决多次触发在发布组件添加解绑事件

beforeDestroy () {
    bus.$off('getTarget')
},