Vue的自定义组件不能使用click方法的解决


Posted in Javascript onJuly 28, 2020

先贴代码

var myButton = Vue.extend({//设置标签
    props: ['names', 'item2'],//names为按钮名,item2为数据
    template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>'
  })
  Vue.component('my-button', myButton);//注册组件

这是上篇博客的自定义按钮权限的代码,然后调用代码:

<my-button names="修改" v-bind:item2="btdata"></my-button>

当你在这个标签上加@click事件的时候报错,原因是因为没有加上native,官网对于native的解释为:

.native - 监听组件根元素的原生事件。

正确的代码为:

<my-button @click.native="alert1()" names="删除" v-bind:item2="btdata"></my-button>

这样就能成功在自定义标签上绑定事件了

补充知识:Vue中利用component切换组件

我就废话不多说了,大家还是直接看代码吧~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom1'">组件1</a>
    <a href="#" rel="external nofollow" rel="external nofollow" @click="componentName='mycom2'">组件2</a>
    <component :is="componentName"></component>
  </div>
</body>
<script>
 
  Vue.component('mycom1',{
    //注意无论是哪种方式创建组件,template都只能有一个唯一的根元素
    template: '<h3>组件1</h3>',//指定组件要展示的html结构
  })
 
  Vue.component('mycom2',{
    //注意无论是哪种方式创建组件,template都只能有一个唯一的根元素
    template: '<h3>组件2</h3>',//指定组件要展示的html结构
  })
 
  //创建一个vue实例
  //当我们导入包之后,在浏览器的内存中就多了一个vue构造函数
  var vm = new Vue({
    el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
    data: { //data属性中存放的是el中要用到的数据
      componentName: 'mycom1'
    }
  });
  
</script>
</html>

以上这篇Vue的自定义组件不能使用click方法的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
vue实现动态数据绑定
Apr 28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
浅析vue-router实现原理及两种模式
Feb 11 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
浅谈JavaScript中this的指向更改
Jul 28 #Javascript
Postman内建变量常用方法实例解析
Jul 28 #Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 #Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 #Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
You might like
PHP中的session安全吗?
2016/01/22 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
用python写asp详细讲解
2013/12/16 Python
Python中生成Epoch的方法
2017/04/26 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python 公共方法汇总解析
2019/09/16 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
党委书记岗位职责
2013/11/24 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
新法人代表任命书
2014/06/06 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
校运会加油稿大全
2015/07/22 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL