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

})

}

有关兄弟组件中间的数据信息传值方法,大家就介绍到这啦!

- END -