Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)

Vue3 $emit用法指南

在Vue3中，使用$emit进行组件间通信仍然是常见的方式。在本文中，我们将深入介绍$emit的用法及相关知识点。

基础用法

$emit的基本用法是在组件内部触发事件并传递参数。以下是一个简单的示例：

<template>
  <div>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count++
      this.$emit('change', this.count)
    },
    decrease() {
      this.count--
      this.$emit('change', this.count)
    }
  }
}
</script>

在这个示例中，increase和decrease方法分别在内部修改count的值，并分别通过$emit触发了名为change的自定义事件，并将count作为参数传递给父组件。

传递多个参数

除了上面示例中的单个参数，我们也可以通过数组和对象来传递多个参数。

<template>
  <div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    submit() {
      const formData = {
        name: 'John Doe',
        age: 25,
        email: '[e-mail]'
      }
      this.$emit('submit-form', [formData, 'extra parameter'])
      // 也可以使用对象来传递多个参数
      // this.$emit('submit-form', { formData, extraParam: 'extra parameter' })
    }
  }
}
</script>

监听事件

在父组件中，我们可以通过v-on或@语法来监听子组件的事件。

<template>
  <div>
    <child-component @change="handleChange" />
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleChange(count) {
      this.count = count
    }
  }
}
</script>

在这个示例中，我们引入了一个名为ChildComponent的子组件，并通过@change监听子组件触发的change事件，并根据传递的参数来更新父组件的count属性。

选项API中的$emit用法

在Vue3中，我们也可以使用选项API中的$emit方法来进行事件的触发。以下是一个示例：

<template>
  <div>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count++
      this.$emit('change', this.count)
    },
    decrease() {
      this.count--
      this.$emit('change', this.count)
    }
  },
  mounted() {
    this.$options.parent.emit('child-mounter', '子组件已挂载')
  }
}
</script>

在这个示例中，我们通过$options.parent来访问父组件，并触发名为child-mounter的事件。

组合API中的$emit用法

在组合API中，我们可以通过getCurrentInstance方法来获取当前实例，并使用$emit方法进行事件的触发。以下是一个示例：

<template>
  <div>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const { emit } = getCurrentInstance()

    const increase = () => {
      count.value++
      emit('change', count.value)
    }

    const decrease = () => {
      count.value--
      emit('change', count.value)
    }

    onMounted(() => {
      emit('child-mounter', '子组件已挂载')
    })

    return {
      count,
      increase,
      decrease
    }
  }
}
</script>

在这个示例中，我们使用了getCurrentInstance方法来获取当前实例，并使用$emit方法来触发名为child-mounter的事件。

setup语法糖中的$emit用法

在Vue3的setup语法糖中，我们可以直接通过context参数来获取emit方法，并触发自定义事件。以下是一个示例：

<template>
  <div>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  setup(props, { emit }) {
    const count = ref(0)

    const increase = () => {
      count.value++
      emit('change', count.value)
    }

    const decrease = () => {
      count.value--
      emit('change', count.value)
    }

    onMounted(() => {
      emit('child-mounter', '子组件已挂载')
    })

    return {
      count,
      increase,
      decrease
    }
  }
}
</script>

在这个示例中，我们直接通过{ emit }来获取emit方法，并使用它来触发名为child-mounter的事件。

结束语

在本文中，我们深入介绍了Vue3中$emit的用法及相关知识点，并且通过多个示例进行了演示。希望本文能够帮助您更好地使用Vue3进行组件间通信。