Vue组件通讯

父子组件通讯

https://www.w3cplus.com/vue/component-communication.html
详细vue通讯

父组件向子组件通讯

在父vue页面的子组件上绑定需要传入的值
在子vue页面的js中定义props：[' ']

父组件

子组件

子组件向父组件通讯

在子vue页面的信息发送父vue页面上 this.$emit('方法','参数')
父vue页面的子组件上定义刚刚设置的方法然后在methods中重写方法(e) e为刚刚的参数

子组件

<template>
  <div>
    子组件：
    <span>{{inputName}}</span>
    <br>
    <button @click="childClick">ok</button>
  </div>
</template>
<script>
export default {
  props: {
    inputName: String,
    required: true
  },
  methods: {
    childClick() {
      this.$emit('childByFun', '1111')
    }
  }
}
</script>

父组件

<template>
  <div>
    <p>父组件：<input type="text" v-model="name"></p>

    <br>
    <p><Child @childByFun="childBy"></Child></p>
  </div>
</template>
<script>
import Child from './Child'

export default {
  data() {
    return {
      name: ''
    }
  },
  components: {
    Child
  },
  methods: {
    childBy(e) {
      this.name = e;
    }
  }
}
</script>

兄弟组件通讯

通过父组件进行兄弟组件之间通讯

*父组件C

<template>
  <div class="c">
    <h5>{{c}}</h5>
    <div class="cc"><b1 :bb2="bb2" @bonesaid="bonesaid"></b1></div>

    <div class="cc"><b2 :bb1="bb1" @btwosaid="btwosaid"></b2></div>
  </div>
</template>

<script>
import B1 from './B1'
import B2 from './B2'
export default {
  data() {
    return {
      c: '我是c也就是爸爸',
      bb1: '',
      bb2: ''
    }
  }, components: {
    B1,
    B2
  },
  methods: {
    bonesaid(e) {
      this.bb1 = e;
    },
    btwosaid(e) {
      this.bb2 = e;
    }
  }
}
</script>

<style scoped>
.c {
  border: 1px solid red;
  background-color: red;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  padding: 10px;
}
.cc {
  display: inline-block;
}
</style>

子组件B1

<template>
  <div class="b1">
    <h6>{{b1}}</h6>
    <div>
      <button @click="toC">给b2发消息</button>
    </div>
    <p>接受消息<input type="text" name="" id="" v-model="bb2"></p>
  </div>
</template>
<script>
export default {
  props: ['bb2'],
  data() {
    return {
      b1: '我就是b1也就是儿子'
    }
  },
  methods: {
    toC() {
      this.$emit('bonesaid', '麻麻，说做作业！！！')
    }
  }
}
</script>

<style scoped>
.b1 {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
</style>

子组件B2

<template>
  <div class="b2">
    <h6>{{b2}}</h6>
    <div>
      <button @click="btwosaid">给b1发消息</button>
    </div>
    <p>接受消息<input type="text" name="" id="" v-model="bb1"></p>
  </div>
</template>
<script>
export default {
  props: ['bb1'],
  data() {
    return {
      b2: '我就是b2也就是儿子'
    }
  },
  methods: {
    btwosaid() {
      this.$emit('btwosaid', '麻麻，说做作业！！！')
    }
  }
}
</script>

<style scoped>
.b2 {
  width: 200px;
  height: 200px;
  background-color: yellow;
}
</style>

通过EventBus进行兄弟间组件通讯

现在main.js定义eventBus

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

export const eventBus = new Vue();

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

父组件CC

<template>
  <div class="cc">
    <h5>{{cc}}</h5>
    <div class="ccc"><BB1></BB1></div>

    <div class="ccc"><BB2></BB2></div>
  </div>
</template>

<script>
import BB1 from './BB1'
import BB2 from './BB2'
export default {
  data() {
    return {
      cc: '我是c也就是爸爸'
    }
  }, components: {
    BB1,
    BB2
  }
}
</script>

<style scoped>
.cc {
  border: 1px solid red;
  background-color: red;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  padding: 10px;
}
.ccc {
  display: inline-block;
}
</style>

子组件BB1

<template>
  <div class="b1">
    <h6>{{bb1}}</h6>
    <div>
      <button @click="messbb2">给b2发消息</button>
    </div>
    <p>接受消息<input type="text" name="" id="" v-model="bs1"></p>
  </div>
</template>
<script>
import { eventBus } from '../main.js'
export default {
  data() {
    return {
      bb1: '我是bb1',
      bs1: ''
    }
  },
  methods: {
    messbb2() {
      eventBus.$emit('bb1said', "bb2 play")
    }
  },
  created() {
    eventBus.$on('bb2said', (e) => {
      this.bs1 = e;
    })
  }
}
</script>

子组件BB2

<template>
  <div class="b2">
    <h6>{{bb2}}</h6>
    <div>
      <button @click="messbb2">给b1发消息</button>
    </div>
    <p>接受消息<input type="text" name="" id="" v-model="bs2"></p>
  </div>
</template>
<script>
import { eventBus } from '../main.js'
export default {
  data() {
    return {
      bb2: '我是bb2',
      bs2: ''
    }
  },
  methods: {
    messbb2() {
      eventBus.$emit('bb2said', "bb1 play")
    }
  },
  created() {
    eventBus.$on('bb1said', (e) => {
      this.bs2 = e;
    })
  }
}
</script>