vue组件间通信

vue的组件之间通信分为三种关系

父传子(父组件传给子组件)

比如:  A.vue传给B.vue              B.vue传给C.vue 或者 B.vue传给D.vue     都称为父传子

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 

注意:如遇到无关联的两个组件建议使用vuex进行通信

 !!!禁止偷我的美女注释

<template>
    <div>
        //父组件
        <!-- 自定义的属性 -->
        <ChildComponents :data="mydata" /> 
    </div>
</template>

<script>
import ChildComponents from "@/components/ChildComponents.vue"
export default {
  components: {ChildComponents},
  data() {
    return {
        mydata:"小明"        
    };
  },
};
<style scoped>
</style>
//                       .::::.
//                     .::::::::.
//                    :::::::::::
//                 ..:::::::::::'
//              '::::::::::::'
//                .::::::::::
//           '::::::::::::::..
//                ..::::::::::::.
//              ``::::::::::::::::
//               ::::``:::::::::'        .:::.
//              ::::'   ':::::'       .::::::::.
//            .::::'      ::::     .:::::::'::::.
//           .:::'       :::::  .:::::::::' ':::::.
//          .::'        :::::.:::::::::'      ':::::.
//         .::'         ::::::::::::::'         ``::::.
//     ...:::           ::::::::::::'              ``::.
//    ```` ':.          ':::::::::'                  ::::..
//                       '.:::::'                    ':'````..
//
//  
//         .............................................  
//                  美女保佑             永无BUG 
//
//          				        程序员之歌      
//                  十年生死两茫茫，写程序，到天亮。  
//                     	千行代码，Bug何处藏。  
//                  纵使上线又怎样，朝令改，夕断肠。  
//
//                  领导每天新想法，天天改，日日忙。  
//                     	相顾无言，惟有泪千行。  
//                  每晚灯火阑珊处，夜难寐，加班狂。  

<template>
    <div>
        子组件
        <!-- 可以直接使用 -->
        <p>{{data}}</p>
        
    </div>
</template>
<script>
export default {
    props:['data'],//通过props接收数据里面存的是自定义属性的名字
  components: {},
  data() {
    return {};
  },
};
</script>
<style  scoped>
</style>

子传父(子组件传给父组件)

比如:  B.vue传给A.vue              C.vue传给B.vue 或者 D.vue传给B.vue     都称为子传父 

 

<template>
    <div>
        父组件
        <!-- 自定义的事件 -->
        <ChildComponents @userName="addName" /> 
    </div>
</template>

<script>
import ChildComponents from "@/components/ChildComponents.vue"
export default {
  components: {ChildComponents},
  data() {
    return {
        mydata:""        
    };
  },
  computed: {},
  watch: {},
  methods: {
    //e 是传递过来的值   
      addName(e){
          this.mydata=e
      }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
</style>

使用$emit传递 

<template>
    <div>
        子组件
        <!-- 绑定点击事件触发 -->
        <button @click="add">点我传递给父级</button>
        
    </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        user_name:"子传父"
    };
  },
  computed: {},
  watch: {},
  methods: {
      add(){
             //通过$emit
          this.$emit("userName",this.user_name)
      }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
</style>

vuex实现互相通信 (推荐)

1.简要介绍Vuex原理

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享，在组件嵌套很多层的情况下，Vue 中父子组件的通信过程就变得很麻烦，此时使用 Vuex 方便了组件间的通信。

vuex官网上说是一个vue的状态管理工具。其实我们可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候，就把其中的变量抽离出来管理。

Vuex提供了一个数据仓库，存放着各种数据data。谁要用谁去请求num的值，谁想改就改该多好是吧，vuex就是干这个的，有点全局变量的意思。任何组件需要拿，改东西，都可以找他。

Vuex主要涉及到state，getters，mutations，actions。

state：是驱动应用的数据源，是惟一的数据载体，跟仓库一样。

mutations：更改state的唯一方法，意思是修改、增加等处理state的方法，

getters：从state中派生出的一些状态，如获取数据的数组的长度，方便其他组件获取使用。简单来说，就是过滤，计算，组合！

actions：用来提交mutations，通过commit再去触发对应的mutations，而不是直接变更state状态。

稍微简单点的vuex管理就使用state和mutations这两个就行。复杂的vuex管理还会涉及到modules等辅助方法。
 

通过this.$store.commit('自定义名','传递值')
mutations: {
    //state 是vuex存放的数据
    userName(state,自定义(接收的数据)){
        
    }

通过this.$store.state.自定义的属性名 在组件中获取vuex的数据