Vue 兄弟组件通信的方法（不使用Vuex）(2)

切记！不能直接使用这个props，一定要经过computed处理，原因我引用vue官方说明

单向数据流

b.vue

<template>
 <div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
</template>

<script>
export default {
 props: ['isLog'],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == 'true'){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bdiv{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

总结： 想要实现兄弟组件传值，一定要首先熟悉子父，父子之间的传值。

子父：

1. 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2. 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3. 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

父子：

1. 子组件在props中创建一个属性，用以接收父组件传过来的值
2. 在子组件标签中添加子组件props中创建的属性，把需要传给子组件的值赋给该属性

文中示例 github 地址：https://github.com/enjoy-pany/vue-emit

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。