在组件中时常看到@click.native。在项目中遇到后,简单介绍下:
@click.native是给组件绑定原生事件
在这里插入图片描述

我的标签 ‘ListCell’ 是子组件引到当前父组件
因为当父组件中引入子组件的时候,当要触发子组件点击事件的时候@click 不生效。
有两种解决方式
1.@click.native
2.在子组件中添加this.$emit ( “事件名” ,value )方法 将子组件的值传到父组件。

<div id="app">
        <div v-on:click="dodo">
            <button v-on:click="doThis">阻止单击事件继续传播</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("dothis");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>

这样的话,会先弹出dothis 在弹出dodo,
如果用@click.stop的话

<div id="app">
        <div v-on:click="dodo">
            <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("dothis");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>

这样的话,只会弹出dothis

@click.stop

问题:父元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件:

<view class=“footer-box” @click=“clickCard”>
<view @click=“footerClick(‘喜欢’)”> 喜欢
<view @click=“footerClick(‘评论’)”> 评论
<view @click=“footerClick(‘分享’)”> 分享

此时,我们就需要使用@click.stop:阻止事件冒泡方法来解决这个问题:

<view class="footer-box" @click="clickCard">
		<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
		<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
</view>

@click.prevent

还有一个与之相似的方法:

@click.prevent

:阻止事件的默认行为,例如:在代码里写入一个a标签,点击会跳转到目标链接网页中:

<view class="example-body">
	<a href="http://www.baidu.com">百度</a>
</view>

但如果我们不想让它跳转但还想使用a标签的话,此时就需要使用@click.prevent方法:

这时再点击a标签的时候就不会跳转目标地址链接了。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐