15vue3实战-----props和emit传值

vue3中props和emit的使用有点不一样,但万变不离其宗。

1.emit的使用

子组件:

<script setup lang="ts">
// 定义触发的事件及其数据类型
const emit = defineEmits(['update', 'delete']);

// 触发事件
const handleUpdate = () => {
  emit('update', { id: 1, name: 'Vue 3' });
};

const handleDelete = () => {
  emit('delete', 1); // 触发 delete 事件，传递一个 ID
};
</script>

<template>
  <button @click="handleUpdate">更新</button>
  <button @click="handleDelete">删除</button>
</template>

父组件:

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
const handleUpdate = (data) => {
  console.log('更新事件触发：', data);
};

const handleDelete = (id) => {
  console.log('删除事件触发，ID:', id);
};
</script>

<template>
  <ChildComponent @update="handleUpdate" @delete="handleDelete" />
</template>

2.配合props实现完整父子通信

子组件与父组件完整通信流程是:

• 父组件通过 props 将数据传递给子组件。
• 子组件通过 emit 将事件通知给父组件。

子组件:

<script setup lang="ts">

// 定义 props
const props = defineProps({
  value: String
});
//定义 emit
const emit = defineEmits(['input']);

// 修改输入时触发 input 事件
const handleInput = (event) => {
  emit('input', event.target.value);
};
</script>

<template>
  <input :value="value" @input="handleInput" />
</template>

父组件:

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const inputValue = ref('初始值');

const handleInput = (value) => {
  inputValue.value = value;
};
</script>

<template>
  <ChildComponent :value="inputValue" @input="handleInput" />
  <p>父组件中的值：{{ inputValue }}</p>
</template>