Vue组件之间传值/调用几种方式

下面我将分享一下Vue组件之间传值/调用几种方式的完整攻略。

1. 父子组件之间传值

1.1. Props 驱动方式

在Vue中，通过Props可以将数据以标签属性的方式传递给子组件。我们可以在子组件中通过props属性接收父组件传递过来的数据，进而渲染到页面上。下面是一个示例：

<!--父组件-->
<template>
  <div>
    <child-component :propsData="message"></child-component>
  </div>
</template>
<script>
import childComponent from './childComponent.vue'
export default {
  components: {
    childComponent
  },
  data () {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<!--子组件-->
<template>
  <div>
    <p>{{ propsData }}</p>
  </div>
</template>
<script>
export default {
  props: ['propsData']
}
</script>

在上面的例子中，假设我们有一个父组件，在模板中使用自定义的child-component组件，并且传递了一个Props属性propsData。在子组件中，我们使用props属性定义了父组件传递过来的数据，然后在页面上进行渲染，最终显示Hello World!。

1.2. $emit 自定义事件方式

除了使用Props驱动方式向子组件传递数据外，还可以通过$emit方法在子组件中定义自定义事件。当子组件需要向父组件通信时，就可以通过$emit方法触发自定义事件，并将参数传递给父组件进行处理。下面是一个示例：

<!--父组件-->
<template>
  <div>
   <child-component @send-msg="handleMsg"></child-component>
  </div>
</template>
<script>
import childComponent from './childComponent.vue'
export default {
  components: {
    childComponent
  },
  data () {
    return {
      recMsg: ''
    }
  },
  methods: {
    handleMsg (msg) {
      this.recMsg = msg
    }
  }
}
</script>

<!--子组件-->
<template>
  <div>
    <button @click="handleClick">向父组件发送消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick () {
      this.$emit('send-msg', 'Hello World!')
    }
  }
}
</script>

在上面的例子中，我们在父组件模板中使用自定义的child-component组件，并通过$emit方法定义了一个名为send-msg的自定义事件。在子组件中，我们定义了一个handleClick方法，用于触发send-msg事件，并将消息Hello World!作为参数传递给父组件。

2. 非父子组件之间传值

2.1. Event Bus 方式

Event Bus是一种事件总线，它可以在全局范围内进行事件的传递和监听。在Vue中，我们可以通过Vue实例来实现一个Event Bus。具体来说，我们可以创建一个中央的Vue实例，专门用于事件的派发和监听，然后在需要通信的组件中使用$on和$emit方法进行事件的监听和派发。下面是一个示例：

<!--bus.js-->
import Vue from 'Vue'
export default new Vue()

<!--子组件1-->
<template>
  <div>
    <button @click="handleClick">向兄弟组件发送消息</button>
  </div>
</template>
<script>
import bus from './bus.js'
export default {
  methods: {
    handleClick () {
      bus.$emit('send-msg', 'Hello World!')
    }
  }
}
</script>

<!--子组件2-->
<template>
  <div>
    <p>{{ recMsg }}</p>
  </div>
</template>
<script>
import bus from './bus.js'
export default {
  data () {
    return {
      recMsg: ''
    }
  },
  mounted () {
    bus.$on('send-msg', msg => {
      this.recMsg = msg
    })
  }
}
</script>

在上面的例子中，我们定义了一个名为bus的中央Vue实例，并通过$emit方法触发了一个名为send-msg的事件，并将消息Hello World!作为参数传递给另一个子组件。在另一个子组件中，我们通过$on方法监听了send-msg事件，并将消息保存到组件的数据中进行渲染。

2.2. Vuex 方式

Vuex是Vue的官方状态管理工具，它提供了一种集中式管理应用所有组件状态的方案。在Vuex中，我们可以将组件的数据作为状态存储到Vuex中，然后可以在任何组件中访问和修改这些状态。下面是一个示例：

<!--store.js-->
import Vue from 'Vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage (state, msg) {
      state.message = msg
    }
  }
})

<!--子组件1-->
<template>
  <div>
    <button @click="handleClick">向兄弟组件发送消息</button>
  </div>
</template>
<script>
import store from './store.js'
export default {
  methods: {
    handleClick () {
      store.commit('setMessage', 'Hello World!')
    }
  }
}
</script>

<!--子组件2-->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import store from './store.js'
export default {
  computed: {
    message () {
      return store.state.message
    }
  }
}
</script>

在上面的例子中，我们在store.js中定义了一个名为message的状态，并通过Vuex提供的mutations方法进行了修改。在子组件1中，我们通过store.commit方法提交一个名为setMessage的mutations并将消息Hello World!作为参数传递给它。在另一个子组件2中，我们通过Vuex提供的computed方法监听了message状态的变化，并将消息渲染到组件中。