组件中的emit

YoloMari2025-01-27 23:24

我们从页面向子组件传递参数时，我们可以使用props；我们从页面向子组件传递模板片段时，可以使用slots；当我们需要子组件传递参数给调用它的页面时，我们可以使用emit进行参数传递。

例如：

html 复制代码

<template>
	<view>
		<image :src="props.pic"></image>
		<view>{
  
  {props.goods_name}}</view>
		<view class="id_name">
			<slot name="s1"></slot>
		</view>
		<view> 
			<slot name="b1"></slot>
		</view>
		<!-- emit的用法 -->
		<button @click="onClick">emit</button>
	</view>
</template>

<script setup>
// const props = defineProps(['pic','goods_name'])

// emit演示
const emit = defineEmits(["add"])
// emit演示
function onClick(){
	emit('add',Math.random())
}

const props = defineProps({
	pic:{
		type:String,
		defaut:"../../static/logo.jpg"
	},
	goods_name:{
		type:String,
		defaut:"None"
	},
	obj_test:{
		type:Object,
		defaut(){
			return {pic:"../../static/logo.jpg",name:"None"}
		}
	}
})
</script>

html 复制代码

<template>
	<view>
		<!-- <blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> id : 123456</view>
			</blog_Props>
		<blog_Props pic="../../static/ai.jpg" goods_name="Picture1">
			<view> <button>这是一个按钮</button></view>
			</blog_Props> -->
			<blog_Props @add="onAdd" pic="../../static/ai.jpg" goods_name="Picture1">
				<template v-slot="s1">
					<view> id : 123456</view>
				</template>
				<template #b1>
					<view> <button>这是一个按钮</button></view>
				</template>
			</blog_Props>
			<view>{
  
  {num}}</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const num = ref(0)
	const onAdd = function(e){
		console.log(e)
		num.value = e
	}
</script>

在上述代码中，子组件中定义了一个传递参数的方法add，并配合一个onclick事件使用，我们在页面中调用子组件时，可以通过@add调用该方法，将该方法的返回值传到别的方法中，如：将返回值传到num中。当我们点击触发子组件中的onClick事件的时候，就会返回一个随机数，并通过onAdd方法将这个值赋给num，在页面上显示出来。