vue组件间传值,父传子&&子传父&&非父子(兄弟组件)之间传值

props父传子

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
子组件通过props方法接受数据;

<!--父组件-->
<template>
  <div>
<p>parents</p>
<Child :default-set="arr"></Child>
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      arr: [1, 2, 3, 4, 5, 6]
    }
  }
}
</script>
<!--子组件-->
<template>
  <div>
    <p>child{{lists}}</p>
  </div>
</template>
<script>
export default {
  props: {
    defaultSet: { // 驼峰式命名 对应父组件里的default-set
      type: Array,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      lists: this.defaultSet
    }
  }
}
</script>

去了解prop验证

$emit子传父,用事件来传值

$emit方法传递参数

<!--父组件-->
<template>
  <div>
<p>parents</p>
<Child  @cancel="cancelCallBack"></Child>
{{message}}
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    cancelCallBack (e) {
      console.log(e)
      this.message = e
    }
  }
}
</script>
<!--子组件-->
<template>
  <div class="child">
    <p>child</p>
    <button @click="fn">传到父组件</button>
  </div>
</template>
<script>
export default {
  methods: {
    fn () {
      let msg = '来自子组件的数据666'
      this.$emit('cancel', msg)	//此处cancel,要对应父组件中@cancel(可以自定义但必须相同)		
      						
    }
  }
}
</script>
<style scoped>
.child{
  background-color: yellow;
}
</style>

EventBus(非父子)兄弟间传值

非父子组件间的数据传递,兄弟组件传值
eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。

import Vue from 'vue'
export const EventBus = new Vue()
<!--兄弟组件B1-->
<template>
  <div class="box">
<p>兄弟组件B1</p>
<button @click="sendMsg">发送消息</button>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  methods: {
    sendMsg () {
      EventBus.$emit('pramas', '来自B1的数据666')
    }
  }
}
</script>
<style scoped>
.box{
  background-color: yellow;
}
</style>
<!--兄弟组件B2-->
<template>
  <div class="box">
<p>兄弟组件B2</p>
  <p style="color:yellow">{{msg}}</p>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {  
    EventBus.$on('pramas', e => {	
      this.msg = e
    })
  }
}
</script>
<style scoped>
.box{
  background-color:red;
}
</style>

两个兄弟组件,引入到同一个父组件中使用:

<template>
  <div class="hello">
	<Brother1></Brother1>
	<Brother2></Brother2>
  </div>
</template>
<script>
import Brother1 from '../pages/Brother1'
import Brother2 from '../pages/Brother2'
export default {
  name: 'HelloWorld',
  components: {
    Brother1, Brother2
  }
}
</script>

此处的pramas ,要对应兄弟组件B2中的pramas(可以自定义但必须相同)

B1传递数据 EventBus.$emit(‘pramas’, ‘…’)

B2接收数据 EventBus.$on(‘pramas’, e => { … })

欢迎留言指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值