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

2024-10-24 14:14:22

先贴代码

  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方法的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

VUE解决 v-html不能触发点击事件的问题

背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染解决方案:不用v-html而是component模板编译上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class
解决vue组件中click事件失效的问题

最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&
Vue自定义组件的四种方式示例详解

四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件定义方式示例: Vue.component("hello-component",{ props:["message"], t
vue中touch和click共存的解决方式

在vue开发手机端项目时,我们经常会遇到touch和click共存的情况,比如城市选择页面的字母滑动 touch事件在手机端会触发浏览器滑动,所以应给touch事件添加阻止默认行为touchmove.prevent.注意阻止默认行为事件不要添加在touchstart事件上,会影响到click事件的发生. touch事件和click事件发生先后顺序: touchstart,touchmove,touchend,click 补充知识:touchstart与click同时触发产生冲突的原因我们可以
Vue的自定义组件不能使用click方法的解决

先贴代码 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.compone
vue在自定义组件上使用v-model和.sync的方法实例

目录自定义事件自定义组件的v-model .sync 修饰符思考总结自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件
vue 封装自定义组件之tabal列表编辑单元格组件实例代码

vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内
vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c
基于Vue实现自定义组件的方式引入图标

前言在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co
vue swipe自定义组件实现轮播效果

本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl
vue.js自定义组件directives的实例代码

自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行
小程序自定义组件全局样式不生效的解决方法

目录太长不看版组件样式隔离 demo 试验优先级页面的隔离配置参考资料在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效.后来发现是由于小程序组件样式隔离的配置导致的. 太长不看版在组件的 json 文件中添加如下配置,全局样式即可生效. // component.json "styleIsolation": "apply-shared" 如果偏好在 js 文件中进行配置,或版本号 < 2.10.1
vue在自定义组件中使用v-model进行数据绑定的方法

本文介绍了vue v-model进行数据绑定,分享给大家,具体如下官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信  <template> <p class="parent"> <p>我是父亲, 对儿
vue.js自定义组件实现v-model双向数据绑定的示例代码

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/>  <

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

相关推荐

随机推荐