vue兄弟组件之间传值的方式有哪些呢? vue兄弟组件之间传值


vue兄弟组件中间传值的方法都有哪些呢?我们一起来瞧瞧吧!
兄弟组件指的是在同一个根组件中的组件, 组件中间沒有应用关联 。
兄弟组件中间的数据信息传值有这两种方法:
第一种在组件构造比较简易状况下,可以根据兄弟组件中的父组件,子组件先把数据信息传递给父组件,父组件再传递给此外的子组件;
【vue兄弟组件之间传值的方式有哪些呢? vue兄弟组件之间传值】第二种是在兄弟组件中建立一个公共性的vue实例来完成情况的传出和监视 。
下列是实际操作示范性:
vue实例:
import Vue from 'vue'
export default new Vue()
然后在子组件中引进公共性的vue实例, 根据vue实例来传出事情:
methods: {
tellname () {
// 传出事情,传递数据信息givename自定事情
bus.$emit('givename', this.mybfname)
}
}
随后将另一个的子组件引进公共性vue实例,根据vue实例监视事情并获取数据:
import bus from '@/utils/myvue.js'
// 组件一载入就开展兄弟组件所发送的事情的监视
mounted () {
// $(dom).on('click',function(){})
// bus.$on(兄弟组件中自定的事情, 处理函数)
// 处理函数有一个默认设置主要参数,便是其他组件所传递的数据信息
bus.$on('givename', (data) => {
console.log(data);
this.mysbfname = data
})
}
有关兄弟组件中间的数据信息传值方法,大家就介绍到这啦!