vue中的组件

组件的创建方式

局部创建组件

视图
<组件名称></组件名称>
​
逻辑
components:{
    组件名称：{
        template:'
    }
}

全局创建组件

component这个方法中有两个参数，第一个参数是组件名称，要按照规则取名。第二个参数是组件的属性和方法
Vue.component('组件名称',{
//组件的内容
})

 

组件名称的命名规则

一、不能用已经存在的标签名称作为组件名称
二、不能用已经存在的标签名称作为组件名称，即使是大写页不行，因为html它不区分大小
三、如果组件名称用的是驼峰命名法，那么在渲染的时候加-，比如<my-header></my-header>

template的使用规则

一、组件中的template这个属性，有且只能有一个根元素
二、我们可以在视图下面提出一个template标签，所有的组件内容，放置在标签下的唯一根元素中

在组件中data为什么必须是一个函数的形式

所有的组件都在同一个html中，类似于css样式，会互相干扰。如果每一个组件的数据它是对象的形式，相当于所有的组件共用一个数据源，那么如果a组件改变了其中一个数据，b组件会受到干扰。因为每一个组件都应该是独立的，所以我们用函数的形式去创建初始化数据，函数是独立的
data是一个对象，它们之间的地址空间是互通，如果是函数，它是一个私密的空间。函数是有自己的函数作用域

动态组件

<component is='组件名称'></component>
相当于
<组件名称></组件名称>
​
如果要切换组件
<组件名称 v-if=''></组件名称>
<组件名称 v-if=''></组件名称>
<组件名称 v-if=''></组件名称>
这么写比较麻烦，我们可以进行代码优化，通多动态组件切换
<component :is='变量'></component>
​