Vue中怎么使用全局数据进行跨组件通信

var globalData={

  message: '全局数据'

}



var app=new Vue({

  data: globalData

})



Vue.component('child-component', {

  template: '<div>{{ $root.message }}

第二段：使用事件总线实现跨组件通信

除了使用全局变量外，我们还可以使用事件总线来实现组件的通信。我们可以通过新建一个Vue实例作为事件总线来实现各个组件之间的通信。首先，我们需要在Vue实例中定义事件总线`bus`，并在组件中引入该对象。接着，我们可以使用`$emit`和`$on`分别发送和监听事件。

var bus=new Vue()



Vue.component('child-component', {

  methods: {

    handleClick: function () {

      bus.$emit('message', '来自子组件的消息')

    }

  },

  template: '<div @click="handleClick">{{ message }}</div>'

})



Vue.component('parent-component', {

  data: function() {

    return {

      message: ''

    }

  },

  mounted: function () {

    var _this=this

    bus.$on('message', function(data) {

      _this.message=data

    })

  },

  template: '<div>{{ message }}</div>'

})

    

第三段：使用Vuex实现全局数据

Vuex是一个专为Vue.js应用程序开发的状态管理模式，在Vue.js应用程序中实现集中式存储管理。要使用Vuex，我们需要安装和导入该库，然后我们需要实现store。我们可以在store中定义一个全局状态，该状态可以在应用程序的各个部分中访问。

//安装Vuex

npm install vuex --save



//导入Vuex库

import Vuex from 'vuex' 

Vue.use(Vuex)



var store=new Vuex.Store({

  state: {

    message: '全局状态'

  }

})



Vue.component('child-component', {

  template: '<div>{{ $store.state.message }}</div>'

})



Vue.component('parent-component', {

  methods: {

    handleClick: function () {

      this.$store.state.message='改变后的全局状态'

    }

  },

  template: '<div @click="handleClick">{{ $store.state.message }}</div>'

})

第四段：使用$attrs和$listeners进行props传递

在一些情况下，我们需要在组件之间进行传递属性。这时，我们可以使用Vue.js提供的特殊属性$attrs和$listeners来进行组件之间的传递。我们可以通过这两个属性来将属性和事件从父组件传递到子组件。

Vue.component('child-component', {

  inheritAttrs: false, //禁用具有自定义名称的父级属性

  props: ['label'], //声明传递方式为props的label

  template: '<input v-bind="$attrs" v-on="$listeners">{{ label }}'

})



Vue.component('parent-component', {

  template: '<div><child-component label="输入框"</div>'

})