Vue中组件的分类

## Vue中组件的分类:全局组件 局部组件
全局组件注册: Vue.component(‘组件名’,{template:’’})
局部组件注册: components(组件名,{template:""})

加粗样式

1-1在script中的操作

// 在Vue实例 中有很多的配置项,都可以在组件中使用了
// console.log(Vue.prototype)
// console.log(Vue.extend())//返回来的是一个Vue的组件(VueComponent) Vue 的子类
// console.log(Vue.extend().prototype)

// 1 全局创建组件 Vue.extend()
const key=Vue.extend({
template:

hello word

,
})
// 2 全局注册组件
Vue.component(‘hello’,key)

var vm =new Vue({
el:’#app’,//挂载点
data:{//数据

},
methods:{//方法

},
computed:{},//计算属性
watch:{},//观察

})

var vm=new Vue({
el:’#app2’,

})

1-2可以利用上变简写的方法
全局组件

Vue.component(‘msg’,{
template:‘

msg的内容

})
var vm=new Vue({
el:’#app’,
})

2-1局部组件
// 局部组件只能在当前的实例中使用,在components中注册
// 1 创建局部组件
const key=Vue.extend({
template:

hello word


})
var vm=new Vue({
el:’#app’,
components: {//局部组件的注册
hello:key
}
})
// var vm =new Vue({
// el:’#app2’,
// components:{
// hello:key
// }
// })

2-2局部组件的简写

new Vue({
el:’#app1’,
components:{//组件
ss:{
template:‘span元素
},
sa:{
template:‘

h1元素


}
}
})

你可能感兴趣的:(Vue中组件的分类)