码迷,mamicode.com
首页 > 其他好文 > 详细

Vue.extend提供自定义组件的构造器

时间:2017-06-04 18:20:05      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:log   传递   微软雅黑   end   line   blog   微软   str   ini   

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。
自定义无参数标签
我们想象一个需求,需求是这样的,要在博客页面多处显示作者的网名,并在网名上直接有链接地址。我们希望在html中只需要写<message></message>   ,这和自定义组件很像,但是他没有传递任何参数,只是个静态标签。
var ms = Vue.extend({
              template:`<div><span>{{name}}</span>-<span>{{sex}}</span></div>`,
              data:function(){
                return{
                  name:"小智",
                  sex:"男"
                }
              }
        })
        // 用$mount把Vue.extend提供的自定义组件挂载到message上
        new ms().$mount(‘message‘)

 

var ms = Vue.extend({

              template:`<div><span>{{name}}</span>-<span>{{sex}}</span></div>`,

              data:function(){

                return{

                  name:"小智",

                  sex:""

                }

              }

        })

        // $mountVue.extend提供的自定义组件挂载到message

        new ms().$mount(‘message‘)

Vue.extend提供自定义组件的构造器

标签:log   传递   微软雅黑   end   line   blog   微软   str   ini   

原文地址:http://www.cnblogs.com/model-zachary/p/6940947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!