vue3-自定义事件

vue3-自定义事件

作用

完成组件之间数据的传递、组件之间的通信

与vue2的区别

父组件中没有差别，子组件中触发方法，为setup中第二个入参context的emit方法

代码

• 父组件

<template>
  <div>userName：{{userName}}</div>
  <div>userAge：{{userAge}}</div>
  <customEvent @event1="event1"></customEvent>
</template>

<script>
  import {
    ref
  } from 'vue'
  import customEvent from './index.vue'
  export default {
    components: {
      customEvent
    },
    setup() {
      let userName = ref('李四')
      let userAge = ref(20)

      function event1(name, age) {
        userName.value = name
        userAge.value = age
      }

      return {
        userName,
        userAge,
        event1
      }
    }
  }
</script>

<style>

</style>

• 子组件

<template>
  <button @click="triggerEvent1">触发event1事件</button>
</template>
<script>
  export default {
    name: 'customEvent',
    // context代表组件上下文对象
    // context是setup的第二个参数
    setup(props, context) {
      function triggerEvent1() {
        //触发事件event1，传递数据。
        context.emit('event1', '张三', 50)
      }

      return {
        triggerEvent1
      }
    }
  }
</script>

涉及内容

vue3、组件通信