Vue.js的组件注册
为什么会有组件注册呢
1.vue.js文件中暴露出一个Vue的构造器函数, 这个函数的作用,是用来实例化出来一个实例, 那么这个实例也是一个组件, 我们称之为 ‘根实例’
2.我们从vue detools(Vue谷歌调试工具)中我们发现这个实例的表现形式是一个标签
2.有时出于需求,我们需要拓展一些方法,又不想写在根实例中,所以Vue.js就给出了一个解决方案,给出了一个方法,这个方法叫做extend;
4.通过对比我们发现 Vue和Vue.extend的输出结果及其相似;但是这两个两个东西的使用方法并不一样;Vue可以new实例化,但是Vue.extend不可以
5.通过对比我们发现,Vue和Vue.extend都有一个options的配置项
6.最终我们知道Vue.extend是通过原型继承自Vue的,所以Vue的所有配置项Vue.js也都有,都能写。
7.当我们去new Vue.extend()的时候发现他会报错,他告诉我们Vue.extend应该写成标签形式
8.然后当我们将Vue.extend的配置项直接写入html中时还是报错了,因为他不符合html的语法,他会直接把他当成标签来解析,但是又没有这个标签
9.就像结婚要去民政局领证一样,只有领证了才能得到国家的认可,Vue.extend也只有得到了html的认可才能在html中正确的解析出来
10.所以这时候就需要组件的注册了
什么是组件
- 想要了解什么是组件,就要先了解什么是 组件化思维
组件化针对的是页面中的整个完整的功能模块划分 (项目的分工) - 组件的概念( 一个文件 )
组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体,new Vue({})我们称之为根实例,Vue.extend我们称之为组件
优点:代码复用,便于维护
划分组件的原则:复用率高的,独立性强的
Vue.js的组件注册分为两种,一种是全局注册,一种是局部注册
两种注册方式又分为以前的写法,和现在vue.js2.0之后新出的简写的写法
<div id="app">
<Hi></Hi>
</div>
<div id="app2">
<Hi></Hi>
</div>
<script>
// 全局注册
// 老牌写法
var Hi=Vue.extend({
template:'<div>这里是老牌的全局组件注册</div>'
})
Vue.component('Hi',Hi)
new Vue({
el:'#app'
})
// 现在的简写
Vue.component('Hi',{
template:'<div>这里是简写的全局组件注册</div>',
// 后面可以接new Vue中的各种配置项
methods:{},
comuted:{},
match:{}
})
new Vue({
el:'#app'
})
//局部注册
//老牌写法
var Hi=Vue.extend({
template:'<div>这里是老牌的局部组件注册</div>'
})
let vm = new Vue({
el:'#app',
components:{//局部注册一定要记得带 's' 是components;不是compponent
'Hi':Hi//key是组件名,值是外面定义的实例名称
}
})
// 现在简写的写法
new Vue({
el:'#app',
components:{
'Hi':{
template:'<div>这里是简写的局部组件注册</div>'
}
}
})
//这个是为了验证局部注册和局部注册的区别的
new Vue({
el:'#app2'
})
//这两个输出的都是构造器函数,参数都是一个options,Vue.extend()是通过原型继承自Vue的,所以这两个构造函数的配置项相同,new Vue中能写的Vue.extend中都能写
// console.log(Vue)
// console.log('-----------------------')
// console.log(Vue.extend())
// console.log('-----------------------')
<script>