Vue2和Vue3中常用组件通信用法分享

下面为您详细讲解“Vue2和Vue3中常用组件通信用法分享”的完整攻略。

1. Vue2中常用组件通信方式

在Vue2中，组件通信有以下几种方式：

1. 父子组件传值

通过父组件向子组件传递值，一般使用props属性。

<!-- Child.vue 父子组件传值示例 -->
<template>
  <div>
    {{message}}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- Parent.vue 父子组件传值示例 -->
<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data () {
    return {
      parentMessage: 'Hello, child!'
    }
  }
}
</script>

2. 子父组件传值

通过子组件向父组件传递值，一般使用$emit方法。

<!-- Child.vue 子父组件传值示例 -->
<template>
  <button @click="handleClick">Click</button>
</template>

<script>
export default {
  methods: {
    handleClick () {
      this.$emit('pass', 'emit something to parent component')
    }
  }
}
</script>

<!-- Parent.vue 子父组件传值示例 -->
<template>
  <div>
    <child @pass="handlePass"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handlePass (data) {
      console.log(data) // 'emit something to parent component'
    }
  }
}
</script>

3. 非父子组件传值

在Vue2中，使用事件总线进行非父子组件之间的通信。

// EventBus.js 
import Vue from 'vue'
export default new Vue()

// ComponentA.vue 非父子组件传值示例
<script>
import EventBus from './EventBus.js'

export default {
  methods: {
    handleClick () {
      EventBus.$emit('pass', 'emit something to another component')
    }
  }
}
</script>

// ComponentB.vue 非父子组件传值示例
<script>
import EventBus from './EventBus.js'

export default {
  created () {
    EventBus.$on('pass', data => {
      console.log(data) // 'emit something to another component'
    })
  }
}
</script>

2. Vue3中常用组件通信方式

在Vue3中，组件通信有以下几种方式：

1. 父子组件传值

同Vue2，通过父组件向子组件传递值，一般使用props属性。

<!-- Child.vue 父子组件传值示例 -->
<template>
  <div>
    {{message}}
  </div>
</template>

<script>
import { defineProps } from 'vue'
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- Parent.vue 父子组件传值示例 -->
<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data () {
    return {
      parentMessage: 'Hello, child!'
    }
  }
}
</script>

2. 子父组件传值

同Vue2，通过子组件向父组件传递值，一般使用$emit方法。

<!-- Child.vue 子父组件传值示例 -->
<template>
  <button @click="handleClick">Click</button>
</template>

<script>
import { defineEmits } from 'vue'
export default {
  emits: {
    pass: data => typeof data === 'string' 
  },
  methods: {
    handleClick () {
      this.$emit('pass', 'emit something to parent component')
    }
  }
}
</script>

<!-- Parent.vue 子父组件传值示例 -->
<template>
  <div>
    <child @pass="handlePass"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    handlePass (data) {
      console.log(data) // 'emit something to parent component'
    }
  }
}
</script>

3. 非父子组件传值

在Vue3中，使用provide和inject实现非父子组件之间的通信。

<!-- Provider.vue 非父子组件传值示例 -->
<template>
  <div>
    <button @click="handleClick">Click</button>
    <slot></slot>
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  setup () {
    const context = 'this is provider context'
    provide('context', context)
  },
  methods: {
    handleClick () {
      //...
    }
  }
}
</script>

<!-- Consumer.vue 非父子组件传值示例 -->
<template>
  <div>
    {{ context }}
  </div>
</template>

<script>
import { inject, reactive } from 'vue'
export default {
  setup () {
    const state = reactive({ context: '' })
    const context = inject('context')
    state.context = context
    return { state }
  }
}
</script>

以上就是Vue2和Vue3中常用组件通信用法的分享。