vue3事件

组件事件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 1 天，点击查看活动详情

记录自己的学习过程

触发与监听事件

子组件通过$emit触发自定义事件，父组件中可以通过v-on（缩写@）来监听事件

// 子组件
<button @click="$emit('changeFn')">点击</button>

// 父组件
<parentComponent @change-fn="changeEevent"></parentComponent>

事件参数

// 子组件
<button @click="$emit('changeFn', 1)">点击</button>

// 父组件
<parentComponent @change-fn="changeCountFn"></parentComponent>

// 定义事件  接收到事件传递来的参数
const  changeCountFn = (num) => {
  count.value += num
}

申明触发的事件

<srcipt setup lang="ts">
//在setup中， $emit不能使用，但是使用defineEmits()会返回一个相同作用的函数供使用 

// defineEmits（）宏不能在子函数中使用，必须直接放置在<script setup>的顶级作用域下
//运行时
const emit = defineEmits(['change', 'updata'])
const  changeFn = (params) => {
  emit('change', params)
}
    
 </script>

import {defineComponents} from 'vue'
expot default defineComponents({
  emits: ['change'],
  setup(props, {emit}){
    emit('change') // // <-- 类型检查 / 自动补全
  }
})

事件校验

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

  // 校验 submit 事件,返回一个布尔值来表明事件是否合法
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

const submitForm => (email, password) {
  emit('submit', { email, password })
}
</script>

为组件的emits标注类型

在setup中

<srcipt setup lang="ts">
//运行时
const emit = defineEmits(['change', 'updata'])

// 基于类型 
const  emit = defineEmit<{
  (e: 'change', id: number):void
  (e: 'update', value: string): void
}>()     

 </script>

不在setup中

import {defineComponents} from 'vue'
expot default defineComponents({
  emits: ['change'],
  setup(props, {emit}){
    emit('change') // // <-- 类型检查 / 自动补全
  }
})

v-model

// 父组件
<parentComponent :modelValue="searchValue" :update:modelValue="newVal => searchValue = newVal"></parentComponent>


//等同于
<parentComponent v-model="searchValue" ></parentComponent>

// 子组件
<input :value="modelValue"  @input="$emit('update:modelValue', $event.target.value)">点击</input>

<script> 
import {defineComponents} from 'vue'
export default defineComponents({
props: ['modelValue'],
emits:['update: modelValue']
})

</script>

v-model 有一些内置的修饰符,例如 .trim、.number 和 .lazy，v-model 上所添加的修饰符，可以通过 modelModifiers（默认值是空对象） prop 在组件内访问到。对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。例如v-model:title.capitalize对应titleModifiers