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 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JS 创建对象的模式实例小结
Apr 28 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
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python中随机函数random用法实例
2015/04/30 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
语文教育专业推荐信范文
2013/11/25 职场文书
给女儿的表扬信
2014/01/18 职场文书
网络信息安全承诺书
2014/03/26 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书