Vue三种常用通信方式 ：父传子、子传父、兄弟组件通信

一.​ 父传子
1、在父组件的子组件标签上绑定一个自定义属性，挂载要传输的数据
2、在子组件中通过props属性来接受传递的数据格式 props:[“自定义属性名”] 接受的数据可以直接使用

父组件内代码

<template>
  <div>
      <lxcf :data='name'/>
  </div>
</template>
<script>
import lxcf from './lxcf'  
export default {
components: {lxcf},
  data() {
    return {
        name:'晴空万里'
    };
  },
  mounted() {},
  methods: {
  },
};
</script>
<style scoped></style>

子组件内代码

<template>
  <div>
      <h2>{{data}}</h2>
  </div>
</template>
<script>
export default {
components: { },
  props:['data'],
  data() {
    return {
    };
  },
  mounted() {},
  methods: {
  },
};
</script>
<style scoped></style>

二.​ 子传父
1、在父组件的子组件标签上自定义一个事件，挂载要调用的方法
2、在子组件的事件中通过this.$emit来触发绑定在子组件的事件格式this.$emit(“事件名”)要传输的数据以参数的形式进行传递

父组件内代码

<template>
  <div>
      <lxcf :data='name' @fct='fct'/>
  </div>
</template>
<script>
import lxcf from './lxcf'  
export default {
components: {lxcf},
  data() {
    return {
        name:'前端攻城狮'
    };
  },
  mounted() {},
  methods: {
      fct(val){
          this.name=val
      }
  },
};
</script>
<style scoped></style>

子组件内代码

<template>
  <div>
      <h2>{{data}}</h2>
      <button @click="fuct">点我</button>
  </div>
</template>
<script>
export default {
components: { },
  props:['data'],
  data() {
    return {
    };
  },
  mounted() {},
  methods: {
      fuct(){
          this.$emit('fct','这是子传父')
      }
  },
};
</script>
<style scoped></style>

三.​ 兄弟组件通信
1、在src中新建一个Bus.js的文件，然后导出一个空的vue实例
2、在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
3、在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

父组件内的代码

<template>
  <div>
    <son1 @xs="xs" />
    <son2 v-show="flag" @xs="xs"/>
  </div>
</template>
<script>
import son1 from "./son1";
import son2 from "./son2";
export default {
  components: { son1, son2 },
  name: "",
  data() {
    return {
      flag: false,
    };
  },
  mounted() {},
  methods: {
    xs() {
      this.flag = !this.flag;
    },
  },

};
</script>
<style scoped></style>

子组件一内的代码

<template>
  <div><input type="text" @click='xianshi' v-model="name"><button>搜索</button></div>
</template>
<script>
import bus from '@/bus'
export default {
components: { },
  name: '',
  data() {
    return {
        name:''
    };
  },
  mounted() {},
  methods: {
      xianshi(){
          this.$emit('xs')
          bus.$on('suibian',(data)=>{
              this.name = data
          })
      }
  },

};
</script>
<style scoped></style>

子组件二内的代码

<template>
  <div>
    <ul>
      <li v-for='(item,index) in list' :key='index' @click="add(item.name)">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
import bus from '@/bus'
export default {
  components: {},
  name: "",
  data() {
    return {
      list: [
        { id: 1, name: "熊大" },
        { id: 2, name: "熊二" },
        { id: 3, name: "熊三" },
      ],
    };
  },
  mounted() {},
  methods: {
      add(name){
          this.$emit('xs')
          bus.$emit('suibian',name)
      }
  },
};
</script>
<style scoped></style>

bus.js内的代码

import Vue from 'vue'
export default new Vue({})