《vue3基础知识》学习笔记 Day17-深入学习组件2-事件

事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件，也可以直接用@来监听事件，也支持修饰符

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

事件参数

比较常见的写法

父组件：

引入子组件：

例如：

import leftChartsTopBox from './components/leftChartsTopBox.vue';

然后父组件内在components注册

components: {
  leftChartsTopBox,
  
},

然后使用：

<leftChartsTopBox
    title="举例"
    type="departmentParams"
    :shipId="departmentParams.shipId"
    :shipList="shipList"
    @changeShip="changeShipParams"
/>

父组件可以定义：departmentParams，departmentParams，shipList，changeShipParams

用于数据和事件的的操作

子组件

props用来接收父组件传递的值
props: {
  title: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  shipId: {
    type: Number,
    default: '',
  },
  shipList:{
    type: Array,
    default: () => [],
  },
  
  list: {
    type: Array,
    default: [],
  },
 
},
emits: ['changeShip','changeYear'],

function changeShip(key: String) {
     emit('changeShip', {type: props.type, shipId: key,  });
   }
function changeYear(key: Number) {
  emit('changeYear', {type: props.type, year: key,  });
}

显式地使用了 setup 函数而不是 <script setup>，则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}
或者

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

 <script setup>中JavaScript

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>
正在搭配 TypeScript 使用 <script setup>，也可以使用纯类型标注来声明触发的事件：

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

事件校验

示例：

<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
    }
  }
})

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