组件中的emit

我们从页面向子组件传递参数时,我们可以使用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,在页面上显示出来。

相关推荐
烛阴17 分钟前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者42 分钟前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
wayhome在哪1 小时前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
&白帝&1 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
江东大都督周总1 小时前
rabbitmq集群
javascript·rabbitmq·ruby
vivi_and_qiao1 小时前
HTML的form表单
java·前端·html
江湖行骗老中医1 小时前
uniapp 引入使用u-view 完整步骤,u-view 样式不生效
uni-app
雪芽蓝域zzs1 小时前
uniapp 页面favicon.ico文件不存在提示404问题解决
uni-app
一嘴一个橘子1 小时前
uniapp 顶部tab + 占满剩余高度的内容区域swiper
javascript·uni-app
睡美人的小仙女1271 小时前
在 UniApp 中,实现下拉刷新
uni-app