精华内容
下载资源
问答
  • 主要介绍了vue 自定义组件的写法与用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 父子组件通信,都是单项的,很多时候需要双向通信。这篇文章主要介绍了vue 自定义组件 v-model双向绑定、 父子组件同步通信,需要的朋友可以参考下
  • 本文实例讲述了VUE 自定义组件模板的方法。分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,...
  • 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码。 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], ...
  • 主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue自定义组件学习

    2018-05-27 01:33:25
    Vue自定义组件,初学者尝试写vue组件过程!前端模块化组件开发
  • 本文通过实例代码给介绍了vue使用自定义组件实现通讯录功能,需要的朋友可以参考下
  • 主要介绍了vue2.0 自定义组件的方法(vue组件的封装),本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
  • 一、Vue自定义组件 组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可...

    一、Vue自定义组件

    组件是可复用的 Vue 实例,且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应对的组件即可。
    1.在项目的components里面新建一个组件
    (建议组件名字大写 防止与标签相撞)
    在这里插入图片描述
    2.在组件.vue的script里面写上name
    在这里插入图片描述
    3. 在app.vue里面导入 app.vue属于全局配置
    js中先引入组件
    在这里插入图片描述
    4.引用完一定记得有使用 不然会报错 在template里面使用一下组件
    在这里插入图片描述

    二、Vue组件组件传值

    图解:
    在这里插入图片描述

    1.父传子
    父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息。
    ①使用props建立数据通道的渠道

    // 这是父组件
    <div id="app">
    // 这是子组件
        <child message="hello" ></child>
    </div>
    

    ②在子组件中通过props传递过来的数据

    Vue,component('child',{
        props:['message'] 
    })
    

    2.子传父
    子组件可以通过 e m i t 触 发 父 组 件 的 自 定 义 事 件 。 v m . emit触发父组件的自定义事件。vm. emitvm.emit(event,arg) 用于触发当前实例上的事件;
    ①子组件中需要一个点击事件触发一个自定义事件

    <template>
      <div>
        子组件:
        <span>{{childValue}}</span>
        <!-- 定义一个子组件传值的方法 -->
        <input type="button" value="点击触发" @click="childClick">
      </div>
    </template>
    <script>
      export default {
        data () {
          return {
            childValue: '我是子组件的数据'
          }
        },
        methods: {
          childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
          }
        }
      }
    </script>
    

    ②在父组件中的子标签监听该自定义事件得到传递的值

    <template>
      <div>
        父组件:
        <span>{{name}}</span>
        <br>
        <br>
        <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        },
        methods: {
          childByValue: function (childValue) {
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>
    

    3.非父子传值
    非父子组件之间传值,需要一个公共的vue来进行传递值和获取值,作为中间仓库来传值,不然路由组件之间达不到传值的效果

    展开全文
  • vue 自定义组件和通信

    2019-03-07 11:27:52
    vue 自定义组件和通信
  • 主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue-自定义组件传值的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 文章目录使用意义基础使用给组件添加属性单一根元素 ...自定义组件Vue.component('标签名', {})一般我们的HTML模板和data数据以及方法之类的都会放在组件的大括号中。下面我会创建一个可以记录点击次

    使用意义

    有时候一组HTML代码可能会在多出使用(比如页眉页脚)。如果我们把这样的代码到处都进行复制粘贴,虽然一时方便了,但后期维护代价非常高,而且代码重复性较高,导致可读性也有所下降。这时候我们就可以将这些重复代码封装成一个组件,以后在使用的时候只需要写上自定义组件的标签即可直接调用。

    基础使用

    自定义组件Vue.component('标签名', {})一般我们的HTML模板和data数据以及方法之类的都会放在组件的大括号中。下面我会创建一个可以记录点击次数的自定义组件。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome</title>
    </head>
    
    <body>
        <div id ="app">
            <component-button></component-button>
            <component-button></component-button>
            <component-button></component-button>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建自定义组件
        Vue.component('component-button', {
            // 自定义组件中 template 负责放入HTML代码
            template: '<button @click="num+=1">当前点击了{{num}}次</button>',
            // data功能和Vue实例中的相同, 但自定义组件中的data是一个函数! 并且用返回值的方式定义属性,如下:
            // 有一定js基础或者看过我之前博客的一定知道data(){}是js创建函数data:function(){}的简写版!
            data(){
                return {
                    num: 0
                }
            }
        });
        // 创建Vue实例
        new Vue({
            el: '#app'
        });
    </script>
    </html>
    

    注意:创建自定义组件无论是否用到了Vue实例,都必须要有Vue实例,并且只能在Vue实例绑定的标签内才能使用自定义组件!!!
    上述代码中包含了templatedata的使用方式。但需要注意在自定义组件中设置属性和在Vue实例中有所不同! 为什么我们要在自定义组件中创建属性,而不是使用Vue实例中的属性?因为如果我们多次调用自定义组件,使用组件内的属性是互相独立互不干扰的!
    在这里插入图片描述

    给组件添加属性

    有时候我们需要所有组件使用的属性是共享的,需要使用Vue实例中的属性,而不是在自定义组件中创建的,这时候我就就可以通过自定义组件中的props创建属性接收值,而调用的时候我们只需要向props创建的属性中传入值即可。

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>自定义组件添加属性</title>
    </head>
    
    <body>
        <div id ="app">
            <!-- vfor是自定义标签中通过props定义的一个属性,我们需要通过此属性传入值 -->
            <props-text :vfor="vfor_dict"></props-text>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建自定义组件
        Vue.component("props-text", {
            // props中设定的是标签中的属性,我们从标签中接收此属性传入的值即可
            props: ["vfor"],
            // 如果需要写多行HTML代码,不能使用单双引号,而是使用反单引号``(英文状态下Tab键上方的键)
            // 多行时候需要注意的是自定义组件遵循单一根元素(根元素只能有一个,多了会出现问题)
            // 下方我的根元素就是table这里不能出现和table同级的元素!!!
            template: `
            <table>
                <tr>
                    <td>称号</td>
                    <td>名字</td>
                </tr>
                <tr v-for="(key, value) in vfor">
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                </tr>
            </table>
            `,
    
        })
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vfor_dict: {
                    人类懂王 : '川建国',
                    祖传百万 : '孙宇晨',
                    这饭真香 : '王境泽',
                    行业冥灯 : '罗老师'
                }
            },
            methods: {
                
            }
        });
    </script>
    </html>
    

    添加的属性不仅能用于绑定Vue中的属性,主要功能是用于传值,将组件外的值传入组件内!然后组件可以根据传入的值做一些变化。
    需要注意的是:多行时候需要注意的是自定义组件遵循单一根元素,在上述代码中我也有提及。如果有多个根元素,很可能会发生只执行首个根元素而又没有任何报错的情况!
    在这里插入图片描述

    传递事件

    上述给组件添加属性的功能主要是用于将自定义组件中的值传入组件内,但如果我们需要将组件内的值传入组件外呢?这时候就需要使用this.$emit函数来实现

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>dome21</title>
    </head>
    
    <body>
        <div id ="app">
            <!-- 先看创建自定义属性后再看这个 -->
            <!-- value用于传入参数,他将遍历出来的参数i传入自定义组件中 -->
            <!-- v用于接收参数,他接收自定义组件传出的参数并在传给item方法 -->
            <component-input v-for='i in vfor_dict' :value='i' @v='item'></component-input>
            {{vdata}}
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>    
        // 创建自定义组件
        Vue.component("component-input", {
            // 创建一个value的属性用于接收参数
            props: ['value'],
            template: `
            <div>
                <!-- checkbox是多选框 -->
                <input type="checkbox" @input="transmit">
                <label>{{value.title}}</label>
            </div>
            `,
            methods: {
                // 每次点击多选框时都会触发此方法
                transmit(){
                    // 此方法定义了一个属性名为v,并将其参数通过v传出
                    this.$emit("v", this.value.name)
                }
            }
        })
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vfor_dict: [
                    {title: '人类懂王', name : '川建国'},
                    {title: '祖传百万', name : '孙宇晨'},
                    {title: '这饭真香', name : '王境泽'},
                    {title: '行业冥灯', name : '罗永浩'}
                ],
                vdata : []
            },
            methods: {
                item(value){
                    // indexOf方法用于判断数据是否已经存在
                    // 因为上述多选框选择和取消选择都会传出相同的参数,我用indexOf方法判断是否当前选择状态,如果vdata中还没有此数据,反之亦然
                    index = this.vdata.indexOf(value)
                    // 如果数据存在,indexOf这会返回数据的角标,如果不存在则会返回-1,根据此可以做一个判断,用来添加或者删除数据
                    if (index>=0) {
                        this.vdata.splice(index, 1)
                    } else {
                        this.vdata.push(value)
                    }
                }
            }
        });
    </script>
    </html>
    

    在这里插入图片描述

    自定义组件的v-model

    剖析v-model原理

    组件除了向内或者向外绑定外,还可以使用v-model进行双向绑定。不过这里我们需要对v-model深入剖析,v-model可以看成为v-bindv-on的组合体。就如同下述代码中使用v-bind+v-on绑定的输入框和v-model绑定的输入框达到了相同的效果!

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>自定义组件内的v-model</title>
    </head>
    
    <body>
        <div id ="app">
            <input type="text" v-model="vmodel">
            <p>{{vmodel}}</p>
            <!-- $event.target.value是获取当前输入框中的值 -->
            <input type="text" :value="vbind" @input="vbind=$event.target.value">
            <p>{{vbind}}</p>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vmodel: '',
                vbind: ''
            }
        });
    </script>
    </html>
    

    正如我上述例子中v-model会默认绑定value属性(prop)和input方法(event)。(不过在碰到单选、多选、下拉菜单等一些特殊情况也会绑定其他的属性和方法,如果想了解可以看我的另一篇专门介绍v-bind,v-on,v-model的博客)
    当犹豫我们是自定义组件,v-model则只会默认绑定value属性(prop)和input方法(event)

    使用示例

    从上述v-model原理中我们可以看出v-model自动绑定属性(prop)和方法(event)限制较大,如果我们在自定义组件中想要v-model绑定指定的属性(prop)和方法(event)需要在自定义组件中添加一个model属性进行指定!

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>自定义组件的v-model_2</title>
    </head>
    
    <body>
        <div id ="app">
            <use-model v-model="vdata"></use-model>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建自定义组件
        Vue.component('use-model', {
            props: ['vitem'],
            model: {
                // 绑定的属性和上述props中对应
                prop: 'vitem',
                // 绑定的事件名
                event: 'item-changed'
            },
            template: `
            <div>
                <button @click="sub"> - </button>
                <span>{{vitem}}</span>
                <button @click="add"> + </button>
            </div>
            `,
            methods: {
                sub(){
                    // 这里绑定的事件名和model中事件名是一个
                    this.$emit('item-changed', this.vitem-1)
                },
                add(){
                    this.$emit('item-changed', this.vitem+1)
                }
            }
        })
        // 创建Vue实例
        new Vue({
            el: '#app',
            data: {
                vdata : 0
            }
        });
    </script>
    </html>
    

    上述程序我们先从自定义组件中的模板开始看,如果我们点击了-或者+,则会触发执行相应的方法,而上述传递事件中我们讲过,this.$emit会向外在指定的事件名中传入值,这时候,我就让其想item-changed(这个名字是可以自己随意命名的)中传值,而这个事件名刚好是被v-model所绑定,一旦被触发这个事件,则其中的值则会传入v-model绑定的属性中。这样就刚好完成了我们的双向绑定!
    在这里插入图片描述
    上述我只是使用了v-model其中一种的使用方法,但v-model还能玩出很多其他花样。

    插槽

    有时候一个组件,可能其中绝大部分都相同,只有极个别的地方文本或者标签不同,这时候我们就可以用到自定义组件中的插槽来完成这个需求。
    当我们使用单个插槽时,非常方便,只需要在需要插入文本或者标签的自定义组件的模板中写入<slot></slot>标签,然后在调用的自定义组件的时候,把我们需要插入的文本或者标签直接卸载自定义组件中即可。如果我们设置了多个插槽,这时候则需要name属性来指定插入那个插槽,这时候调用的时候,我们必须要使用<template v-slot:name名>标签来指定slot绑定的属性名。如下

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>自定义组件的插槽</title>
    </head>
    
    <body>
        <div id ="app">
            <use-slot url="https://www.baidu.com">
                <!-- 如果插槽中指定name属性的标签,必须使用<template v-slot:name名></template>包裹其想要插入的标签或者文本!-->
                <!-- 注意:这里的template不能改变  -->
                <template v-slot:name>
                    <h6>百度一下</h6>
                </template>
                <template v-slot:remarks>
                    <span>比360和搜狗好用太多了</span>
                </template>
            </use-slot>
            <use-slot url="https:cn.bing.com">
                <template v-slot:name>
                    <h1>必应</h1>
                </template>
                <template v-slot:remarks>
                    <span>蛮不错的</span>
                </template>
            </use-slot>
        </div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        // 创建自定义组件
        Vue.component('use-slot', {
            props:['url'],
            // 如果有多个插槽标签<slot></slot>,最好在插槽中添加一个name属性,方便在插入时插到正确的位置
            template:`
            <div>
                <a :href="url">
                    <slot name="name"></slot>
                </a>
                <span>备注: </span><slot name="remarks"></slot>
            </div>
            `
        })
        // 创建Vue实例
        new Vue({
            el: '#app'
        });
    </script>
    </html>
    

    在这里插入图片描述

    展开全文
  • 具体参考博客:
  • VUE 自定义组件,调用组件 在做项目的过程中我们会遇到很多重复性的功能或者页面布局,我们可以把这些可以进行多次使用的代码进行封装,变成组件。 这是一个头部卡片组件 在制作页面时经常会用到类似这种的卡片头部...

    VUE 自定义组件,调用组件

    在做项目的过程中我们会遇到很多重复性的功能或者页面布局,我们可以把这些可以进行多次使用的代码进行封装,变成组件。

    这是一个头部卡片组件

    在制作页面时经常会用到类似这种的卡片头部样式,可能参数不同,但是排布,样式是一样的

    <template>
      <div class="title">
        <div class="heda">
          <img
            v-if="userPortrait"
            class="imgurl"
            :src="userPortrait"
            alt="用户头像"
          />
          <span v-if="!userPortrait" class="van-icon van-icon-manager" />
        </div>
        <div class="name-part">
          <div class="h3">
            {{ userName }}
            <div v-if="party" class="party">
              <span class="icons icon-dangyuan " />
            </div>
          </div>
          <div class="time">
            <div class="left-part">
              <span v-if="isshowphone" class="right">{{ userPhone }}</span>
              <span v-if="isshowaddress" class="right">{{ address }}</span>
              <span v-if="isshowcreatedate" class="right">{{ createdate }}</span>
            </div>
          </div>
        </div>
            <!--如果isshowstatus为true显示状态-->
        <div v-if="isshowstatus" class="status">
          {{ statusinfo(status) }}
        </div>
            <!--如果isshowtime为True显示时间-->
        <div v-if="isshowtime" class="status">
          {{ settime }}
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "gridList",
      props: {
        userName: String, //名字
        party: Boolean, //是否显示LOGO
        userPortrait: String, //头像
        createdate: String, //发布时间
        status: Number,
        isshowcreatedate: {
          type: Boolean,
          default: false
        },
        isshowphone: {
          type: Boolean,
          default: false
        },
        isshowaddress: {
          type: Boolean,
          default: true
        },
        isshowtime: {
          type: Boolean,
          default: true
        },
        isshowstatus: {
          type: Boolean,
          default: false
        },
        userPhone: String,
        address: String,
        settime: String
      },
      data() {
        return {};
      },
      methods: {},
      computed: {
        statusinfo() {
          return function(status) {
            if (status == 0) {
              return "求助中";
            } else if (status == 1) {
              return "代办中";
            } else if (status == 2) {
              return "已完成";
            } else if (status == 3) {
              return "已评价";
            }
          };
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    .h3 {
      color: #232323;
      font-size: 14px;
      font-weight: normal;
      padding: 0;
      width: 65%;
      float: left;
      margin-left: 10px;
      line-height: 20px;
      text-align: left;
      display: inline-flex;
      margin-top: 3px;
    }
    .title {
      min-height: 19vw;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: white;
    }
    
    .name-part {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-start;
    
      position: relative;
      top: 0.66667vw;
      width: calc(100% - 37vw);
    }
    .hrs {
      background: #eee;
      width: 95%;
      height: 0.1px;
      margin: auto;
    }
    .status {
      color: #52c486;
      font-size: 14px;
      width: 86px;
      text-align: right;
    }
    .time {
      font-size: 3.2vw;
      font-family: MicrosoftYaHei;
      color: #7f7f7f;
      margin-left: 2.66667vw;
      width: 100%;
    }
    
    .left-part {
      max-width: 80%;
      overflow: hidden;
      display: flex;
      flex-flow: row wrap;
      justify-content: start;
      align-items: center;
    
      .tag {
        padding: 2px 4px;
        margin: 2px;
        color: #07c160;
        border: #07c160 1px solid;
        border-radius: 10px;
      }
    }
    
    .heda {
      width: 45px;
      height: 45px;
      border-radius: 100%;
      float: left;
      display: block;
      margin: 0;
      position: relative;
      background: #ccc;
      text-align: center;
      margin-top: 5px;
    }
    
    .img {
      height: 100%;
      width: 100%;
      border-radius: 100%;
      position: absolute;
      left: 0;
    }
    
    .columnName {
      color: #fff;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -70%);
      background: #ff8200;
      line-height: 24px;
      border-radius: 12px;
      font-size: 12px;
      padding: 0 8px;
      text-align: center;
    }
    
    .van-icon-manager {
      font-size: 34px;
      color: #999;
      position: relative;
      top: 3px;
    }
    
    .party {
      height: 17px;
      width: 17px;
      color: #ffd700;
      margin-left: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .icons {
        font-size: 14px;
      }
    }
    .h2 {
      color: #5a5a5a;
      font-size: 16px;
      font-weight: normal;
      padding: 0;
      line-height: 22px;
      text-align: left;
    }
    .textOverflowHidden {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    
    .zoom {
      width: 112px;
      height: 81px;
      text-align: left;
      float: left;
    }
    .info {
      width: 100%;
      min-height: 120px;
    }
    .imgurl {
      height: 100%;
      width: 100%;
      border-radius: 100%;
    
      left: 0;
    }
    .img {
      width: 31.3%;
      height: 85px;
      margin: 10px 2% 0.5%;
      border-radius: 5px;
    }
    .content-container {
      margin-left: 3.66667vw;
      float: left;
      width: 220px;
      min-height: 120px;
      word-wrap: break-word;
      margin-top: 10px;
    }
    </style>
    
    

    在这里插入图片描述

    调用自定义组件

    <template>
      <div class="t-info">
        <cardtitle
         v-for="item in listData"
          :key="item.id"
          :userName="item.userName"
          :party="item.party"
          :userPortrait="item.userPortrait"
          :createdate="item.createdate"
          :settime="settime"
          :address="address"
          :isshowstatus="true"
          :isshowtime="flase"
        />
      </div>
    </template>
    <script>
    //如果在同一文件夹下的组件
    import cardtitle from "./cardtitle";
    //在别的文件夹下的组件
    import cardtitle from "../card/cardtitle";
    export default {
      name: "gridList",
      components: { cardtitle,},
      data() {
        return {
          listData:[]//可以调用接口添加数据或者直接自定义数组里的参数和值
        };
      },
      methods: {},
      computed: {}
    };
    </script>
    
    <style lang="scss" scoped>
    .t-info {
      width: 100%;
      background-color: white;
    }
    </style>
    
    展开全文
  • 主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
  • 1.首先创建一个自定义组件 Vue.component('test-component',{ template:`<div id="el"><input @input="change"><button @click="getInputData">点我看input数据</button></div>`, ...

    1.首先创建一个自定义组件

    Vue.component('test-component',{
    	template:`<div id="el"><input @input="change"><button @click="getInputData">点我看input数据</button></div>`,
    	event:'inputData',
    methods:{
    	change:function(e){
    		//this.$emit('change', e.target.value);
    		this.inputData=e.target.value;
    	},
    	getInputData:function(){
    		console.log(this.inputData);
    	}
    }
    });
    

    2.在html中调用组件

    	<template>
    		<test-component></test-component>
    	</template>
    	```
    
    展开全文
  • vue自定义组件(超详细)

    千次阅读 2020-12-23 20:17:35
    #vue自定义组件的使用方法
  • 在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑: 为什么自定义组件在利用时,data变量引用方式为函数引用 Vue.component("this",{ template:'#info', methods:{ add(){this.number++} ...
  • <template> <div class="page-list"> <span class="list-txt">{{ title }}</span> <!-- <ex-btn v-if="current == 'ex-btn'" v-on:myClick="myClick" :...
  • VUE 自定义组件模板

    千次阅读 2019-03-28 17:45:23
    先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁...关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the ru...
  • vue自定义组件及定义插槽

    千次阅读 2020-08-13 20:09:16
    vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
  • Vue自定义组件 Vue.component

    千次阅读 2018-09-16 23:32:35
    Vue.component Vue自定义组件(1) 如果有朋友对Vue基础还不够了解的可以先看下官方的教程http://doc.vue-js.com/v2/guide/ 这个是官方的网址,官方的教程还是写的简单易懂的。 Component是Vue.js最核心的功能,...
  • vue 自定义组件@click无效 <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,001
精华内容 32,000
关键字:

vue的自定义组件

vue 订阅