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>