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

Posted 2020-09-21 千と千寻の

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:"男"

                }

              }

        })

        // 用$mount把Vue.extend提供的自定义组件挂载到message上

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