八种vue实现组建通信的方式

以下是八种Vue实现组件通信的完整攻略：

1. Props

Props是Vue组件间通信中最常用的一种方式。Props允许父组件向子组件传递数据，可以通过在子组件中声明props选项来接收父组件传递的值。示例代码如下：

<!--父组件模版-->
<template>
  <Child :msg="message" />
</template>

<!--子组件模版-->
<template>
  <div>{{ msg }}</div>
</template>

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

2. $emit

$emit是Vue组件间通信中另一种常用方式，它允许子组件触发自定义事件并发送数据到父组件。父组件通过v-on（或@）监听子组件触发的事件，将子组件发送的数据作为回调函数的参数。示例代码如下：

<!--父组件模版-->
<template>
  <Child v-on:update="handleUpdate" />
</template>

<script>
export default {
  name: 'Parent',
  methods: {
    handleUpdate(value) {
      this.message = value
    }
  }
}
</script>

<!--子组件模版-->
<template>
  <button v-on:click="updateMessage">Update</button>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    updateMessage() {
      this.$emit('update', 'hello')
    }
  }
}
</script>

3. $parent / $children

可以在子组件中使用$parent访问父组件实例，但是这种方式容易造成父子组件之间的高耦合，不建议使用。可以使用$children访问子组件实例，但是这种方式同样不可靠，因为$children的执行顺序是不确定的。示例代码如下：

<!--父组件模版-->
<template>
  <Child />
</template>

<script>
export default {
  name: 'Parent',
  mounted() {
    console.log(this.$children[0].message)
  }
}
</script>

<!--子组件模版-->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

4. $refs

$refs可以在父组件上引用子组件实例或子元素，从而直接调用子组件的方法或访问子元素的属性。如果要引用子组件实例，需要在子组件上使用ref属性。示例代码如下：

<!--父组件模版-->
<template>
  <Child ref="child" />
</template>

<script>
export default {
  name: 'Parent',
  mounted() {
    console.log(this.$refs.child.message)
  }
}
</script>

<!--子组件模版-->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      message: 'hello'
    }
  }
}
</script>

5. event bus

Event Bus是一种Vue中常用的全局事件总线，它可以在任何地方触发自定义事件和监听自定义事件。之所以称之为总线，是因为它是一个全局Vue实例，可以通过$emit触发自定义事件，通过$on监听自定义事件。示例代码如下：

main.js:

Vue.prototype.$bus = new Vue();

<!--父组件模版-->
<template>
  <div>
    <input v-model="message" />
    <button v-on:click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'Parent',
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      this.$bus.$emit('message', this.message);
    }
  }
}
</script>

<!--子组件模版-->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$bus.$on('message', (value) => {
      this.message = value;
    });
  }
}
</script>

6. Vuex

Vuex是Vue官方推荐的状态管理库，它可以在不同组件之间共享状态及数据。在Vuex的架构中，状态从根组件向下逐级分发，而每个组件都可以通过getter、mutation、action方法进行更新。这种方式适用于组件之间关系非常复杂，需要共享数据的场景。示例代码如下：

store.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     message: ''
  },
  mutations: {
     updateMessage(state, payload) {
        state.message = payload;
     }
  },
  actions: {
     updateMessage(context, payload) {
        context.commit('updateMessage', payload)
     }
  },
  getters: {
     message: state => state.message
  }
})

<!--父组件模版-->
<template>
  <div>
    <input v-model="message" />
    <button v-on:click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'Parent',
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      this.$store.dispatch('updateMessage', this.message);
    }
  }
}
</script>

<!--子组件模版-->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Child',
  computed: {
    ...mapGetters([
      'message'
    ])
  }
}
</script>

7. provide / inject

provide / inject是Vue 2.2.0新增的一种组件间通信方式，它可以提供一种高效的途径，让父组件后代组件之间共享一些数据。provide负责提供数据，而inject负责将数据注入到后代组件中。需要注意的是，这种方式向后代组件传递数据时，不像props那样明确，而是在后代组件中使用inject选项来去声明需要注入的字段。示例代码如下：

<!--父组件模版-->
<template>
  <div>
    <Child />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',
  provide() {
    return {
      message: 'hello'
    }
  },
  components: {
    Child
  }
}
</script>

<!--子组件模版-->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'Child',
  inject: ['message']
}
</script>

8. mixin

Mixin是一种Vue提供的重用逻辑的方式，可以将多个组件共同需要的逻辑统一封装进一个Mixin对象中，然后再把这个对象引入到需要使用该逻辑的组件中。它适用于多个组件可能需要重用相同的逻辑的场景。示例代码如下：

// 消息Mixin
export const messageMixin = {
  methods: {
    showMessage() {
      alert(this.message)
    }
  },
  data() {
    return {
      message: 'hello'
    }
  }
}

<!--父组件模版-->
<template>
  <div>
    <Child />
    <OtherChild />
  </div>
</template>

<script>
import Child from './Child'
import OtherChild from './OtherChild'
import { messageMixin } from './mixins'

export default {
  name: 'Parent',
  mixins: [messageMixin],
  components: {
    Child,
    OtherChild
  }
}
</script>

<!--子组件模版-->
<template>
  <button v-on:click="showMessage">Show Message</button>
</template>

<script>
export default {
  name: 'Child',
  mixins: [messageMixin]
}
</script>

以上就是八种Vue实现组件通信的方式的完整攻略，对您有所帮助。