vue入门教程（4）——组件化
目录
- 7.组件化
-
- 7.1 定义全局组件
- 7.2.组件的复用
- 7.3.局部组件
- 7.4.vue组件简单属性传值
- 7.5.vue组件复杂属性传值
- 7.6.vue中模板之间的套用
- 7.7.子组件绑定父组件自定义事件
7.组件化
在大型应用开发时，页面可以划分很多部分，往往不同的页面也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们的开发成本，所以我们会把页面不同的部分拆分成独立的组件，然后在不同的页面就会共享这些组件，避免重复开发。
7.1 定义全局组件
我们通过Vue的componet方法来定义一个全局组件
语法：
//全局组件
Vue.componet("",{})
""为此组件的名字
{}里为组件内容
全局组件的特点就是每当一个类new一个Vue对象，就都可以使用这个组件了
示例：
<body>
<div id="app">
<counter>counter>
div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
Vue.component("counter",{
template:`
`,
data(){
return{
num:0
}
},
methods:{
increment(){
this.num++
},
}
})
var vue = new Vue(
{
el:"#app",
}
)
script>
我们在写template里的内容是HTML，但是我们用``这个符号，这个符号在左上角Esc的下边，因为这个符号是可以换行的，""是不可以换行的。
还有在data属性里面的
data(){
return{}
}
这里使用return的原因是，保证这个组件在多个地方使用时，data里面的数据是独立的
- 组件其实是Vue的实例，因为他在定义的时候也会接受：data，methohs，生命周期函数等
- 不同的组件不会与页面元素绑定，否则就无法复用，因此没有el属性
- 但是组件渲染需要HTML模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕后，任何vue实例都可以直接在HTML中通过组件名称来使用组件的
- data的定义方式比较特殊，必须是一个函数
7.2.组件的复用
组件的复用其实很简单，以上提为例，我们定义了一个全局组件counter，
多次使用这个组件就是组件的复用
<div id="app">
<counter>counter>
<counter>counter>
<counter>counter>
div>
7.3.局部组件
一旦注册了全局组件，就意味着即便你以后不使用这个组件，他依然会随着Vue的加载而加载。
因此对于一些使用不频繁的组件，我们采用局部注册
我们先在外部定义一个对象，结构与创建全局组件时传递的第二个参数一致：
提示：这里的let，也可以是const、var，至于他们的区别：
- 1.const定义的变量不可以修改，而且必须初始化。
- 2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错
- 3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。
let counter = {
template:`
<button @click="increment()">点我增加{
{num}}button>
`,
data(){
return{
num:0
}
},
methods:{
increment(){
this.num++
},
}
}
如果我们要使用这个局部组件就要先在Vue中注册它：
请注意：这里是components，而不是component
var vue = new Vue(
{
el:"#app",
components:{
counter:counter
}
}
)
倘若你局部组件和你起的组件名字相同，就像上面一样，你可以直接这样写
：
components:{
counter
}
最终效果是一样的：
7.4.vue组件简单属性传值
如果我们想在我们定义的组件上传值该怎么办，我们可以用到props
语法
props:["",""]
示例：
<body>
<div id="app">
<message text="这是一个文本！" title="这是一个标题">message>
div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
let message = {
template:`
{
{text}}
{
{title}}
`,
props:['text','title'],
data(){
return{
}
}
}
var vue = new Vue({
el:"#app"