native - 监听组件根元素的原生事件，主要是给自定义的组件添加原生事件

mxlWhb

于 2023-03-06 09:40:11 发布

阅读量360

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42859450/article/details/129355049

版权

文章介绍了在Vue.js中如何使用v-on的/native/修饰符来在父组件上监听自定义子组件的原生事件。通过示例代码展示了在uni-app中，如果不使用.click.native，则父组件无法捕获到子组件的点击事件，以及如何定义和触发相应的方法进行数据交互。

摘要由CSDN通过智能技术生成

官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗来讲：就是在父组件中给自定义的子组件绑定一个原生的事件，不加’. native’事件是无法触发的，如下图
在这里插入图片描述

<template>
	<view>
		<TestValue style="color:red" title="hahhaha" @click.native="clickChild"  />
	</view>
</template>

<script>
	import TestValue from '@/components/TestValue.vue'
	export default {
		components:{TestValue},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			clickChild(){
				uni.showToast({title:"这是个子组件的事件"})
			}
		}
	}
</script>