Vue.js的全局组件和局部组件的创建

Vue的全局组件

结构部分:

{{msg}}

{{msg}}

 Vue的全局组件要在实例Vue之前创建,书写方式有两种:

一:

(先定义组件:)

 Vue.component("helloWorld",{

template:`

 

{{msg}}

   

`,

data(){

return{  title:"这是全局组件"  }

}

})

实例Vue:

new Vue({

el:"#app",

data:{

msg:"这是顶层组件1"

}

})

new Vue({

el:"#web",

data:{

msg:"这是顶层组件2"

}

})

         第一种全局组件的创建时,在template时会有点繁琐,并且不会产生任何的输入提示,不方便,所以Vue提供了一个template的标签,可以更方便的创建组件

二:

       (创建template模板)

    (在Vue中进行定义:)

Vue.component("helloWord",{

template:"#one",

data(){

return { msg:"这是全局组件" }

}

})

接下来就可以进行使用了

全局组件创建完毕.可以在任意一个Vue实例中使用,只需要引入组件名标签即可

此处:    关于helloWord标签的解释:因为在js中,不允许使用中划线,所以如果通过小驼峰的命名方式,在html中需要加上中划线,在html中,这些标签名都会被自动解释为小写的没有符号的标签名.       但是建议组件名一致

---

Vue的局部组件

局部组件的使用规则,就是谁注册谁使用

先创建html标签:

{{msg}}

使用组件

创建template模板:

定义组件:

const tmp = {

template:"#two",

data(){

return {  msg:"这是局部组件"  }

}

}

注册组件:

new Vue({

el:"#app",

data:{

msg:"这是顶层组件"

},

components:{

"hello":tmp

}

})

  总之在创建组件的时候,大致可以分为3步:

        第一步:先创建template模板

        第二步:定义组件

        第三步:注册组件(全局组件在定义完组件之后就可以使用了)