组件中的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,在页面上显示出来。

相关推荐
烛阴4 分钟前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee36 分钟前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin1 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw52 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler2 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !2 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖2 小时前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖3 小时前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端
Jackson__3 小时前
使用 ICE PKG 开发并发布支持多场景引用的 NPM 包
前端
饺子不放糖3 小时前
前端错误监控与异常处理:构建健壮的Web应用
前端