Vue 自定义组件

  html:

:msg="btn.sure"========》这种适用于props
{{btn.sure}}===========》这种使用于slot插槽
1 <nel-btn class="VuePrimaryBtn" :msg="btn.sure">{{btn.sure}}</nel-btn>
2 <nel-btn class="VueDangerBtn" :msg="btn.delete" @click.native=‘aa()‘>{{btn.delete}}</nel-btn>
3 <nel-btn class="VueWarningBtn" :msg="btn.warn">{{btn.warn}}</nel-btn>
4 <nel-btn class="VueSuccessBtn" :msg="btn.ok">{{btn.ok}}</nel-btn>

  

  js:

  

 1 //全局组件:
 2      Vue.component(‘nel-btn‘, {
 3     // template: ‘<button class="VueDefaultBtn"><slot></slot></button>‘//slot方式,html子组件直接{{msg}}
 4     template: ‘<button class="VueDefaultBtn">{{msg}}</button>‘,//props方式,html子组件:msg="btn.ok";
 5     props:{
 6         msg:{type:String}
 7     }
 8 })
 9
10
11 //子组件:
12  var app = new Vue({
13         el: "#app",
14         data: {
15             list: [],
16             btn:{
17                 sure:"确定",
18                 delete:"删除",
19                 warn:"警告",
20                 ok:"成功"
21             }
22         },
23         mounted() {
24
25         },
26         methods: {
27             aa(){
28                 console.log(33333);
29             }
30         }
31     })

  自定义组件,click事件不起作用,得用  @click.native

原文地址:https://www.cnblogs.com/nelsonlei/p/11634935.html

时间: 2024-10-29 11:01:43

Vue 自定义组件的相关文章

vue自定义组件v-model

  一个组件上的`v-model`默认会利用名为`value`的prop(属性)和名为input的事件,但是像单选框.复选框等类型的输入控件可能会将`value`特性用于不同的目的.这时候我们可以在定义组件的时候,通过设置`model`选项可以用来实现不同的处理方式. 在创建组件的时候,添加`model`属性,其中要包含两个属性配置,分别是: event:什么时候触发v-model行为 prop:定义传递给v-model的那个变量,绑定到哪个属性值上 下面是实现计数器作用的代码: <!DOCTY

vue自定义组件并使用

以下是使用自己写的一个简单的文件上传框为例 时间:20180710 编写:luoxm qq:1085656523 1.自定义组件结构(一个js文件,一个vue文件),最好单独放一个文件 2.upload.vue 内容   其中,action是父组件传递给子组件的参数,使用props进行接收,并关联到action中. props 父级传给组件的数据   然后用  $emit('方法名',数据) 返回父级数据 3.index.js内容 index.js的内容分成3个步骤(缺一不可): a).引入vu

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<template> <div> 我是组件 </div></template> <script> export default { }</script> <style scoped> div{ font-size:40px; color:

vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个loading.vue文件 // Cmponent.vue <template> <div> ...loading </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px

[转] vue自定义组件中的v-model简单解释

在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件的封装效果更好.所以,个人认为,我们自己封装组件也应该有这样的思维,父组件通过slot或者props传值,由子组件完成一些效果,再抛出必要的事件让父组件接受,这样组件的可复用性就很强,有利于多次使用. v-model指令是什么? 刚刚提到,iview通过v-model双向绑定数据,所以首先我们要明白

vue 自定义组件 v-model双向绑定、 父子组件同步通信

父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-model 第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上. 第一种: 父组件: <template> <div> <aa cl

vue自定义组件 (两种之二)弹窗为例

方式: 利用js代码,在必要时候动态弹出组件, 而不需要Vue.use,也必在页面上写组件. 依据: vm.$mount( [elementOrSelector] ) 参数: {Element | string} [elementOrSelector] {boolean} [hydrating] 返回值:vm - 实例自身 用法: 如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素.可以使用 vm.$mount() 手动地挂载一个未挂载的实例. 如

Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>组件定义</title> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <script type="

vue 自定义组件的自定义属性

1 <auto-com :value="value"></auto-com> //带 : 的属性传入的是动态的值 2 <auto-com value="value"></auto-com> //不带 : 的属性传入的是静态的值,即字符串 3 4 var vm = new Vue({ 5 el:'#app', 6 data:{ 7 value: 'zzzzzz' 8 }, 9 render:ele=>ele(App