$emit 事件 vue 2.0 到 vue 3.0 中的使用

vue 3.0 发布以后 $emit 事件的使用方式也发生了改变这里记录一下

vue 3.0 中的使用

// 子组件中
// 组件模板中定义一个点击事件
 <button @click="clickAction">自定义按钮</button>
 // 在script 函数中定义emits (emits与setup components 方法是同级的) 
  emits:['clickAction'],
 
 // 在setup 方法中实现响应事件
  setup(props,ctx) {

    const clickAction = ()=> {
        console.log('子组件点击事件........')
        ctx.emit("clickAction",'111www')
    }
    return {
        clickAction
     }  
// 父组件中     
 <testSubVue :msg = "msg" @clickAction = "clickAction">{{msg}}</testSubVue>
  const clickAction = (value)=> {
          console.log('点击子组件事件' +value)
   }
    

在 vue 2.0 中的用法

    //子组件
    methods() {
        clickAction() {
            this.$emit('clickAction','123123')
        }
    }
    // 父组件响应
    <testSubVue :msg = "msg" @clickAction = "clickAction">{{msg}}</testSubVue>
    const clickAction = (value)=> {
        console.log('点击子组件事件' +value)
   }

• Vue2.0 与 vue3.0 中的具体使用区别主要对子组件中的定义进行了区别至于父组件的响应与2.0保持一致