精华内容
下载资源
问答
  • 2022-06-10 13:58:49

    @click是vue的语法糖,效果是给某个元素快速绑定click事件,但是只能给原生的那些元素绑定,不能给组件绑定。

    如果要给组件绑定click事件,那么就需要用到@click.native,这样才能给组件绑定上click事件。

    prevent是阻止冒泡,在给组件绑定了click事件之后,点击该组件,不仅会触发click事件,也会触发这个组件自带的事件(如点击checkbox组件,不仅会触发click,还会把这个checkbox勾选,如果加上了prevent,则就不会触发组件自带事件,即不会勾选了)

    更多相关内容
  • Vue的@click、@click.prevent、@click.stop

    千次阅读 2021-07-11 20:35:21
    1、@click,绑定监听(单击事件) v-on:click="function" @click="function" @click="function(params)" <button id="test1" @click="test1">test1</button> <!-- params:参数 --> <...

    1、@click,绑定监听(单击事件)

            v-on:click="function"

            @click="function"

            @click="function(params)"

    <button id="test1" @click="test1">test1</button>
    <!-- params:参数 -->
    <button id="test2" @click="test2('parpams')">test2</button>
    <button id="test3" @click="test3('params', $event)">test3</button>
    
    methods: {
        test1(value) {
          //test1函数没有参数,默认传递 $event
          let test1 = document.getElementById("test1");
          test1.innerHTML = value;
        },
        test2(value) {
          // test2有参数则传递该参数
          let test2 = document.getElementById("test2");
          test2.innerHTML = value;
        },
        test3(value, event) {
          // 有参数想获取到event事件,则方法中需要写$event传递
          let test2 = document.getElementById("test3");
          test2.innerHTML = value + "---" + event;
        },
    },

    2、@click.prevent,阻止事件默认行为

    什么是事件默认行为?

    当一个事件发生的时候浏览器自己会默认做的事;例如:点击a标签,网页会自动跳转到相应的网页、鼠标右击时会出现右键菜单栏、滚动鼠标滚轮时,网页会随之进行滑动.......

    3、@click.stop,阻止事件冒泡

    什么是事件冒泡?

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或事件返回true,那么这个事件会向这个对象的的父级传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者到达了对象层次的最顶层,即document对象。

    展开全文
  • Vue中@click.stop与@click.prevent

    千次阅读 2021-03-12 11:14:53
    Vue中@click.stop与@click.prevent 一、@click.stop 问题:父元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件: <view ...

    Vue中@click.stop与@click.prevent

    一、@click.stop

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

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

    此时,我们就需要使用@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方法:

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

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

    展开全文
  • Vue .sync修饰符一、.sync修饰符二、@click.stop与@click.prevent 一、.sync修饰符 <comp :foo.sync="bar"></comp> 等价于 <comp :foo="bar" @update:foo="val => bar = val"></comp> ...

    一、.sync修饰符

    <comp :foo.sync="bar"></comp>
    等价于
    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新 foo 的值时,需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)
    

    示例:

    <template>
        <div class="details">
            <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
            <button @click="changeValue">toggle</button>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    Vue.component('myComponent', {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props:['show'],
          methods: {
            closeDiv() {
              this.$emit('update:show', false); //触发 input 事件,并传入新值
            }
          }
    })
    export default{
        data(){
            return{
                valueChild:true,
            }
        },
        methods:{
            changeValue(){
                this.valueChild = !this.valueChild
            }
        }
    }
    </script>
    

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定的变量。

    二、@click.stop与@click.prevent

    @click.stop:阻止事件冒泡
    vue中点击事件直接在元素中使用@click="click"即可,但是有时在一个元素中包含了子元素,而且父元素和子元素都有点击事件,此时我们希望的点击效果就是:点击子元素区域的的时候,不触发父级元素的点击事件

    @click.prevent:阻止事件的默认行为,

    <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>   //阻止a标签跳转,仅执行函数test4
    
    <form  action="/xxx"   @submit.prevent="test5">   //阻止表单提交,仅执行函数test5
    
             <input type="submit" value="注册">
    </form>
    

    参考文章:
    [1] 深入理解vue 修饰符sync【 vue sync修饰符示例】

    展开全文
  • vue函数@click.prevent使用纪要

    千次阅读 2021-03-22 14:15:05
    背景:vue项目操作中遇到@click.prevent函数,场景特殊(项目中有一个自己封装的组件库,因此所有的样式都统一集成,遇到特殊情况想引入特殊UI风格处理时,部分组件需要样式重调,因此用到@click.prevent)特此纪要...
  • initial-scale=1.0"> <title>Documenttitle> <style> style> head> <body> <div id="app"> <a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度a> div> <script src="js/vue.js">script> ...
  • @click.stop和@click.prevent区别

    千次阅读 2020-06-05 00:08:00
    click.stop stop:指的是阻止父组件(节点)的事件冒泡。。。 <div id="app"> <div class="box" @click="box()"> <div class="box-child" @click="boxchild()"> </div> </div&...
  • vue官方文档中对click修饰词的描述比较抽象 简单写了几个例子 @click.stop Dom子节点往根节点传播叫做冒泡 stop不让冒泡再进行下去 <div @click="click1()" > <a @click.stop="click2()"></a> &...
  • .prevent 用于阻止默认... 上此关键字,click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌套div3 <div id="app" v-on:click="show"> 1 <div id="app2" v-on:click.capture="show2"> 2 ...
  • 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit(“click”.fn) <Item xss=removed></Item> 补充知识:vue——组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给...
  • 1、绑定监听@click:(以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click="fun(参数)" &lt;button @click="test1"&gt;test...
  • @click.native.prevent

    2021-11-05 14:26:38
    给vue组件添加click事件,加上native ,不然会被认为是item组件的自定义事件 prevent作用是阻止默认事件
  • 看到这个@click.native.prevent有点懵逼, 然后查了点资料,还是零零散散的资料。。自己总结一下 1.在封装好的组件上使用,所以要加上.native才能click 2.prevent就相当于…event.preventDefault() 所以@submit....
  • 事件处理 绑定监听 为按钮绑定事件监听 简单分为以下情况: <div id="test"> <button @click="btn1">不带参数函数</button>...button @click="btn2('我是带参数函数')">...button @click="btn3"&...
  • Vue - @click.prevent

    2022-02-23 10:33:40
    .prevent: 调用event.preventDefault() <...input type="submit" value="提交" @click.prevent="submitClick"> </form> </div> <script src="../vue.js"></script>
  • 具体可以查看这个问题:https://www.oschina.net/question/1785591_2273843 官方解释: 用@click.prevent.self会阻止所有的点击,而@click.self.prevent只会阻止对元素自身的点击。 个人感觉需要用到这种方式...
  • 1、@click用法 @click="fun" @click="fun(参数)" v-on:click="fun"//完整写法 2、@click.stop 阻止事件冒泡 //点击child区域时只会执行函数sayChild,不会执行函数sayFather <div class="father" @click=...
  • 1. @click.prevent 阻止事件的默认行为 <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转,仅执行函数test4 <form action="/xxx" @submit.prevent="test5">...
  • @click.prevent阻止事件的默认行为

    千次阅读 2020-07-10 18:12:09
    a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> <form action="/xxx" @submit.prevent="test5"> <input type="submit" value="注册"> </form> 第一个 阻止a...
  • 2.@click.prevent的使用(阻止点击后的默认跳转) 运行结果: 有文字输出并且跳转到百度界面 阻止跳转的方法:@click.prevent 注意!!!一定要写在app的div里面 结果:阻止了跳转 3.v-on:key...
  • 一.vue @click.native native就是把组件变回原生DOM的一种方式,相当于给组件绑定原生事件 // 父组件.vue <tree @click.native="clickTree"></tree> // 如果不使用.native,在子组件tree上绑定click是...
  • @click.prevent 阻止事件的默认行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
  • 一、@click.native.prevent="handleLogin 1.在封装好的组件上使用,所以要加上.native才能click 2.prevent就相当于..event.preventDefault() 所以@submit.native.prevent是用来阻止默认行为的 ; 二、@keyup....
  • 1,在封装好的组件上使用click,必须加上.native。 2,prevent是用来阻止默认的事件。就相当于Jquery里面的event.preventDefault()。
  • &lt;div @click="alert(1)"... @click.prevent.self="alert(2)"&gt; &lt;div @click="alert(3)"&gt;&lt;/div&gt; &lt;/a&gt; &lt;/div

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,919
精华内容 11,567
关键字:

@click.prevent

友情链接: DLFlo.rar