• 售前

  • 售后

热门帖子
入门百科

vue 实现click同时传入变乱对象和自界说参数

[复制链接]
123457710 显示全部楼层 发表于 2021-10-25 20:02:16 |阅读模式 打印 上一主题 下一主题
仅仅传入自界说参数

HTML
  1. <div id="app">
  2. <button @click="tm(123)">ddddd</button>
  3. </div>
复制代码
JS代码
  1. new Vue({
  2.   el:'#app',
  3. methods:{
  4.    tm:function(e){
  5.     console.log(e);
  6.   }
  7. }
  8. })
复制代码
仅仅传入事故对象

HTML
  1. <div id="app">
  2. <button @click="tm">ddddd</button>
  3. </div>
复制代码
JS代码
  1. new Vue({
  2.   el:'#app',
  3. methods:{
  4.    tm:function(e){
  5.     console.log(e);
  6.   }
  7. }
  8. })
复制代码
同时传入事故对象和自界说参数

HTML
  1. <div id="app">
  2. <button @click="tm($event,123)">ddddd</button>
  3. </div>
复制代码
JS代码
  1. new Vue({
  2.   el:'#app',
  3. methods:{
  4.    tm:function(e,value){
  5.     console.log(e);
  6.     console.log(value);
  7.   }
  8. }
  9. })
复制代码
补充:vue常用事故之v-on:click 以及事故对象,事故冒泡,事故默认行为
实在v-on背面跟的不止是click事故也可以是其他的事故,用法均相似。好比:v-on:click/mouseout/mouseover/mousedown.......
以下click为例
注意:全部的v-on都可以简写为@,好比说v-click可以简写为@click
1.监听事故

可以用 v-on 指令监听 DOM 事故,并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操纵,这些操纵(好比点击)触发后执行的动作(js)可有直接写在背面
  1. v-on:click="item+=1"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <input type="button" value="clickme" v-on:click="item+=1"/>
  4.   <div>{{item}}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'HelloWorld',
  10. data () {
  11.   return {
  12.   item:1
  13.   }
  14. }
  15. }
  16. </script>
  17. <!-- Add "scoped" attribute to limit CSS to this component only -->
  18. <style scoped>
  19. </style>
复制代码
结果:

可以望见每点击一次绑定的值就增长1.也就是说可以吧js的操纵放在事故触发的背面。但是偶然候逻辑太复杂的时间写在里面就会造成杂乱,视图和逻辑肴杂。以是click背面可以接一个方法,把全部处理逻辑的方法封装在一个函数里面click的时间调用
2.事故处理方法
  1. v-on:click="greet"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <input type="button" value="clickme" v-on:click="greet"/>
  4.   <div>{{res}}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'HelloWorld',
  10. data () {
  11.   return {
  12.    name : 1,
  13.    res:""
  14.   }
  15. },
  16. methods:{
  17.   greet: function () {
  18.    // `this` 在方法里指向当前 Vue 实例
  19.    this.res='Hello ' + this.name + '!';
  20.   }
  21. }
  22. }
  23. </script>
  24. <!-- Add "scoped" attribute to limit CSS to this component only -->
  25. <style scoped>
  26. </style>
复制代码
结果:

可以望见点击之后执行了greet方法里面js逻辑
3.带参数的时间绑定方法:

同上,唯一区别是携带了参数
  1. v-on:click="greet(name)"
复制代码
  1. <template>
  2. <div >
  3.   <input type="button" value="clickme" v-on:click="greet(name)"/>
  4.   <div>{{res}}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'HelloWorld',
  10. data () {
  11.   return {
  12.    name : 1,
  13.    res:""
  14.   }
  15. },
  16. methods:{
  17.   greet: function (reccept) {
  18.    // `this` 在方法里指向当前 Vue 实例
  19.    this.res='Hello ' + reccept+1 + '!';
  20.   }
  21. }
  22. }
  23. </script>
  24. <!-- Add "scoped" attribute to limit CSS to this component only -->
  25. <style scoped>
  26. </style>
复制代码
结果划一。对方法的调用同样可以一个方法多处多次的调用
4.内联处理器中的方法

也就是说在方法里面调用其他的方法,这里的其他方法可以是js原生的方法好比制止冒泡呀等等,也可以是自界说的方法
  1. v-on:click="greet(name,$event)"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <input type="button" value="clickme" v-on:click="greet(name,$event)"/>
  4.   <div>{{res}}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'HelloWorld',
  10. data () {
  11.   return {
  12.    name : 1,
  13.    res:""
  14.   }
  15. },
  16. methods:{
  17.   greet: function (reccept,event) {
  18.    if (reccept===1) this.say()
  19.   },
  20.   say:function () {
  21.    this.res="我调用了"
  22.   }
  23. }
  24. }
  25. </script>
  26. <!-- Add "scoped" attribute to limit CSS to this component only -->
  27. <style scoped>
  28. </style>
复制代码
结果:

5.事故对象

$event 拿到当前点击事故的事故对象,好比click就是拿到当前点击的dom事故对象信息
  1. v-on:click="greet($event)"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <input type="button" value="clickme" v-on:click="greet($event)"/>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'HelloWorld',
  9. data () {
  10.   return {
  11.    hide : true
  12.   }
  13. },
  14. methods:{
  15.   greet: function (ev) {
  16.   alert(ev.clientX)
  17.   }
  18. }
  19. }
  20. </script>
  21. <!-- Add "scoped" attribute to limit CSS to this component only -->
  22. <style scoped>
  23. </style>
复制代码
结果:

6.事故冒泡

当不制止事故冒泡的时间会弹两次
eg
  1. <template>
  2. <div >
  3.   <div @click="show1($event)">
  4.    <div @click="show2($event)">点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show1: function (ev) {
  18.    alert(1)
  19.   },
  20.   show2: function (ev1) {
  21.    alert(2)
  22.   }
  23. }
  24. }
  25. </script>
  26. <!-- Add "scoped" attribute to limit CSS to this component only -->
  27. <style scoped>
  28. </style>
复制代码
那么但制止冒泡后就只会弹一次
eg:原生js制止冒泡
  1. ev1.cancelBubble=true
复制代码
  1. <template>
  2. <div >
  3.   <div @click="show1($event)">
  4.    <div @click="show2($event)">点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show1: function (ev) {
  18.    alert(1)
  19.   },
  20.   show2: function (ev1) {
  21.     ev1.cancelBubble=true
  22.    alert(2)
  23.   }
  24. }
  25. }
  26. </script>
  27. <!-- Add "scoped" attribute to limit CSS to this component only -->
  28. <style scoped>
  29. </style>
复制代码
那么vue自己封装的制止冒泡方法呢?
  1. @click.stop="show2()"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <div @click="show1()">
  4.    <div @click.stop="show2()">点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show1: function () {
  18.    alert(1)
  19.   },
  20.   show2: function (ev1) {
  21.    alert(2)
  22.   }
  23. }
  24. }
  25. </script>
  26. <!-- Add "scoped" attribute to limit CSS to this component only -->
  27. <style scoped>
  28. </style>
复制代码
7.制止默认行为:

好比:如下右键之后会将默认的菜单带出来
  1. <template>
  2. <div >
  3.   <div>
  4.    <div @contextmenu="show2()">右键点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show2: function (ev1) {
  18.    alert(2)
  19.   }
  20. }
  21. }
  22. </script>
  23. <!-- Add "scoped" attribute to limit CSS to this component only -->
  24. <style scoped>
  25. </style>
复制代码
结果:

那么就有了制止默认行为
  1. ev1.preventDefault();
复制代码
eg:
  1. <template>
  2. <div >
  3.   <div>
  4.    <div @contextmenu="show2($event)">右键点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show2: function (ev1) {
  18.    alert(2);
  19.    ev1.preventDefault();
  20.   }
  21. }
  22. }
  23. </script>
  24. <!-- Add "scoped" attribute to limit CSS to this component only -->
  25. <style scoped>
  26. </style>
复制代码
点击后默认菜单将不会表现(PS早360欣赏器右键无效)
vue里面的封装的制止默认行为的方法:
  1. @contextmenu.prevent="show2()"
复制代码
eg:
  1. <template>
  2. <div >
  3.   <div>
  4.    <div @contextmenu.prevent="show2()">右键点击我呀</div>
  5.   </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'HelloWorld',
  11. data () {
  12.   return {
  13.    hide : true
  14.   }
  15. },
  16. methods:{
  17.   show2: function (ev1) {
  18.    alert(2);
  19.   }
  20. }
  21. }
  22. </script>
  23. <!-- Add "scoped" attribute to limit CSS to this component only -->
  24. <style scoped>
  25. </style>
复制代码
8.其他事故修饰符

用法都一样就不再赘述
.capture
.self
.once
  1. <!-- 阻止单击事件继续传播 -->
  2. <a v-on:click.stop="doThis"></a>
  3. <!-- 提交事件不再重载页面 -->
  4. <form v-on:submit.prevent="onSubmit"></form>
  5. <!-- 修饰符可以串联 -->
  6. <a v-on:click.stop.prevent="doThat"></a>
  7. <!-- 只有修饰符 -->
  8. <form v-on:submit.prevent></form>
  9. <!-- 添加事件监听器时使用事件捕获模式 -->
  10. <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
  11. <div v-on:click.capture="doThis">...</div>
  12. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  13. <!-- 即事件不是从内部元素触发的 -->
  14. <div v-on:click.self="doThat">...</div>
复制代码
利用修饰符时,次序很重要;相应的代码会以同样的次序产生。因此,用 @click.prevent.self 会制止 全部的点击 ,而 @click.self.prevent 只会制止对元素自身的点击。
2.1.4 新增
  1. <!-- 点击事件将只会触发一次 -->
  2. <a v-on:click.once="doThis"></a>
复制代码
不像别的只能对原生的 DOM 事故起作用的修饰符,.once 修饰符还能被用到自界说的组件事故上。如果你还没有阅读关于组件的文档,现在大可不必担心。
  1. <!-- the scroll event will not cancel the default scroll behavior -->
  2. <div v-on:scroll.passive="onScroll">...</div>
复制代码
Vue 为这些修饰符额外提供了 .passive 修饰符来提拔移动端的性能。
举个例子,在滚动的时间,欣赏器会在整个事故处理完毕之后再触发滚动,因为欣赏器并不知道这个事故是否在其处理函数中被调用了 event.preventDefault()。.passive 修饰符用来进一步告诉欣赏器这个事故的默认行为不会被取消。
不要把 .passive 和 .prevent 一起利用。被动处理函数无法制止默认的事故行为。
以上为个人履历,希望能给各人一个参考,也希望各人多多支持脚本之家。如有错误或未考虑完全的地方,望不吝赐教。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作