vue如何给自定义的组件绑定点击事件

目录
  • 给自定义的组件绑定点击事件
  • 给自定义组件添加单击事件

给自定义的组件绑定点击事件

在做项目中我们往往会封装许多的组件，来减少代码的重复性，提高代码的可利用性，有时候也会给组件绑定事件，但是经常会失效。

先给cardinfo这个组件绑定一个点击事件

     <cardinfo
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

一般都是这样给点击事件，可是有时候这个事件是没用的，因为这个事件是引用组件页面的事件，而不是组件本身的事件，所以组件内不能识别这个事件的来源。

     <cardinfo
       @click="goodclick"
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

在@click后面加native表示的是当前页面的事件

  <cardinfo
        @click.native="goodclick"
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

给自定义组件添加单击事件

自己定义了一个按钮按组件

<template>
  <div>
     <div class="endBtn">
       <van-button type="danger" block color="linear-gradient( to left ,#F24B0B, #FF4A44 )">{{btnMsg}}</van-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UiEndbutton',
  props:["btnMsg"],
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>
<style lang="stylus" scoped>
   .endBtn
      width: 345px
      height: 44px
      border-radius: 4px
      background: radial-gradient(#F24B0B  100%,#FF4A44   100%);
      margin-top: 15px
      margin-left: 15px
</style>

在其他的页面引用这个组件

引入

import EndButton from '@/components/EndButton.vue';
export default {
  name: 'UiEndyuyuetransfer',
   components:{
     PageTop,
      YuyueDetailItem,
      EndButton,
   },
   methods:{
   toEndYuyueTransferResult(){
   this.$router.push({name:"EndYuyueTransferResult"})
   }
   }
}

在页面中

<end-button btnMsg="终止" @click="toEndYuyueTransferResult"></end-button>

点击按钮你会发现，方法没有被触发。

给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件。

<end-button btnMsg="终止" @click.native="toEndYuyueTransferResult"></end-button>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件添加事件@click.native操作

    1,给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件 2,等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) <Item @click.native = "shijian()"></Item> 补充知识:vue--组件间(兄弟组件间)事件派发与接收 法一 main.js 在初始化vue之前,给 data 添加一个名为 event 的空v

  • Vue组件之自定义事件的功能图解

    Vue组件之自定义事件的功能图解

    使用v-on绑定自定义事件 (一)基于webpack的项目初始化 在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下 进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹 vue init webpack myapp 安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图 安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们

  • vue学习笔记之给组件绑定原生事件操作示例

    本文实例讲述了vue学习笔记之给组件绑定原生事件操作.分享给大家供大家参考,具体如下: 当在父组件中定义一个点击事件,并且在父组件的methods中定义了这个点击事件时,在页面上点击并不会有什么反应.那么该怎么办呢? 我们可以在子组件的template中的dom上定义一个点击事件(原生事件),并且在子组件的methods中定义该点击事件,然而点击页面时也只会alert(child click ). 这是为什么呢?父组件的点击事件被vue当成自定义事件,点击后没有检测到,这时需要子组件向父组件触发

  • Vue之组件的自定义事件详解

    Vue之组件的自定义事件详解

    目录 总结 <template> <div > <h2>{{msg}}</h2> <!-- 通过父组件给子组件传递函数类型的数据props实现:子给父传递数据 --> <School :getName="getName"/> <Student :getStudentname="getStudentname"/> <!-- 通过父组件给子组件绑定一个自定义事件:实现子给父传递数据

  • vue如何给自定义的组件绑定点击事件

    目录 给自定义的组件绑定点击事件 给自定义组件添加单击事件 给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效. 先给cardinfo这个组件绑定一个点击事件      <cardinfo         :content="content"         :from="from"         :ProPortrait="ProPortrait&quo

  • vue使用v-model进行跨组件绑定的基本实现方法

    vue使用v-model进行跨组件绑定的基本实现方法

    大家好,今天我们来说一下使用v-model实现父子组件的绑定效果 1:简单版代码如下: 父组件: <template> <div> // 3:使用子组件,并使用v-model绑定 <About v-model="father"/> </div> </template> <script> // 1:引入子组件 import About from "./About"; export default

  • vue递归实现自定义tree组件

    vue递归实现自定义tree组件

    本文实例为大家分享了vue递归实现自定义tree组件的具体代码,供大家参考,具体内容如下 1. 在tree/index.vue中: <template> <div> <ul> <item :model='data'></item> </ul> </div> </template> <script> import Item from './item' export default { componen

  • Vue如何给组件添加点击事件 @click.native

    目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It

  • Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框

    目录 1.需求描述 2.功能实现 1.创建按钮 2.创建对话框 3.对话框与按钮的绑定 3.对话框表单的改造 4.对“状态”Switch开关所提交的类型进行修改 5.完整代码 总结 1.需求描述 想要实现点击一个按钮就弹出一个对话框,在对话框中可输入数据进行提交,在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row> <el-button type="primary" plain>新增</el-

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • 在elementui中Notification组件添加点击事件实例

    在elementui中Notification组件添加点击事件实例

    1. 官方文档 2. 添加点击事件,传参 handleClick() { let telNo = "1111", message = "22222", _this = this; //函数作用域问题 this.$notify({ title: "通知消息", position: "bottom-right", dangerouslyUseHTMLString: true, message: `<p style="

  • JavaScript给每一个li节点绑定点击事件的实现方法

     1.单击事件 <body> <h2>javascript 事件</h2> <ul> <li>aaaa</li> <li>aaaa111</li> <li>aaaa222</li> <li>aaaa3333</li> <li>aaaa444</li> </ul> <script type="text/javasc

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

随机推荐