Vue.js 组件之间的转换

Vue.js是一个现代化的JavaScript框架，强大的组件化能力是它的重要特性之一。其中，组件是一种可复用的Vue实例，可将页面拆分为独立的功能块。

在Vue.js中，组件之间的转换即组件之间的传值，很多程序员可能在使用时会遇到一些问题。本文将介绍Vue.js组件之间的转换方式。

父子组件之间的传值

在Vue.js中，父子组件之间的传值是最常见的一种转换方式。一般采用props和$emit进行传值。

父组件传值到子组件

父组件可以通过prop向子组件传递数据：

<template>
  <div>
    <child-component :msg="parentMsg"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMsg: 'Hello Vue.js!'
    }
  }
}
</script>

子组件在props中声明接收父组件传递的数据：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

子组件传值到父组件

子组件可以通过$emit事件向父组件派发事件：

<template>
  <div>
    <button @click="emitEvent">发送事件</button>    
  </div>
</template>

<script>
export default {
  methods:{
    emitEvent(){
      this.$emit('send-event', 'Hello Vue.js!')
    }
  }
}
</script>

父组件在使用子组件时通过v-on监听事件：

<template>
  <div>
    <child-component @send-event="handleChildEvent"></child-component>
    <div>{{ parentMsg }}</div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMsg: ''
    }
  },
  methods: {
    handleChildEvent(msg) {
      this.parentMsg = msg
    }
  }
}
</script>

兄弟组件之间的传值

在Vue.js中，兄弟组件之间的传值需要借助一个空的Vue实例作为中介，即事件总线。

创建一个events.js文件：

import Vue from 'vue'
export const EventBus = new Vue()

在一个兄弟组件中触发事件：

<template>
  <div>
    <button @click="emitEvent">发送事件</button>    
  </div>
</template>

<script>
import { EventBus } from '@/events'
export default {
  methods:{
    emitEvent(){
      EventBus.$emit('send-event', 'Hello Vue.js!')
    }
  }
}
</script>

在另一个兄弟组件中监听事件：

<template>
  <div>{{ msg }}</div>
</template>

<script>
import { EventBus } from '@/events'
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted(){
    EventBus.$on('send-event', (msg) => {
      this.msg = msg
    })
  }
}
</script>

非父子组件之间的传值

在Vue.js中，非父子组件之间的传值需要借助一个高级插件vuex来进行状态管理。

安装vuex：

npm install vuex --save

创建一个store.js文件：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg: ''
  },
  mutations: {
    updateMsg(state, msg) {
      state.msg = msg
    }
  }
})

export default store

在使用时，在main.js文件中import并使用store：

import Vue from 'vue'
import store from './store'
import App from './App.vue'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在组件中使用$store.state来获取状态值：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  computed:{
    msg(){
      return this.$store.state.msg
    }
  }
}
</script>

在组件中通过$store.commit来触发state的修改：

<template>
  <div>
    <button @click="emitEvent">发送事件</button>    
  </div>
</template>

<script>
export default {
  methods:{
    emitEvent(){
      this.$store.commit('updateMsg', 'Hello Vue.js!')
    }
  }
}
</script>

通过以上三种方式，Vue.js组件之间的传值问题可以得到完美解决。