（十二）vue.js组件——组件基础（1）

1)学习组件的原因

概述
组件是vue.js最核心的功能，也是整个框架设计最精彩的地方，当然也是最难的地方。
原因
Vue.js的组件就是为了提高代码重用性和高扩展性的，特别是将ui与js作为一个整体进行复用与扩展。
一些具体的场景
1.UI构建----》粘贴到其他地方------》所有的ui都修改某处？
应用项目的组成

2)组件的基本用法

和创建一个vue实例需要创建后才能使用类似，组件也需要进行注册（定义）后才能使用。
注册分为全局注册和局部注册两种方式。

全局注册
基本语法

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
//组件内容写这里
template:"<button>按钮计数器</button>",
})

基本使用

归纳总结
1.创建全局组件时，应该使用Vue对象的component方法，这个方法接收两个参数。
第一个字符串：表示组件名称， 第二个为一个对象：表示组件内容。
2.组件要渲染的内容应该写在template选项中，作为其值进行处理。
3.注册时，推荐组件名称为【小写加分隔符链接的形式】，类似于css属性名的写法。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
//组件内容写这里
template:"<button>按钮计数器</button>",
})

4.组件全局注册后，在任何vue实例中都可以使用，但前提是相关vue实例应该在注册后在声明。

<script>
//在vue实例创建前声明一个全局组件，名称为button-counter
Vue.component('button-counter', {
template: "<button>按钮计数器</button>",
})
//声明一个vue实例
let vueApp1 = new Vue({
el: "#app",
});
</script>

5.组件在使用时，应该以标签形式调用

<div id="app">
<button-counter></button-counter> <!-- 以标签形式使用组件 -->
</div>

使用进阶

①　组件复用性的基本体现

②　组件的template选项
在此选项中，我们可以给很多内容，只要最外层用一个标签包裹起来就可以了

注意：如果外层有多个标签，那么就只会渲染第一个标签。

③　全局组件可以在其注册后创建的所有vue实例中使用

④　全局组件一定要在所有vue实例创建之前注册定义
!
⑤　声明在前面的全局组件可以直接使用声明在后面的全局组件

如果有多个全局组件，要在根实例中使用时，他们都需要在根实例之前声明，但是对于他们本身而言，虽然也有声明的顺序，但是并不影响，即声明在前面的全局组件可以直接使用声明在后面的全局组件

组件内容中的其他选项
因为组件实际上也可以说是一个Vue 实例，不过他可以复用而已。所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

然后由于组件的使用需要具有独立性，所以其data 选项必须是一个函数，而不能是一个引用类型的对象。（对于引用类型类型而言，一处改，处处都会改），而且其语法规则也只能是函数。

1.基本演示

2.Data返回值不能是外部定义的对象
即便你的data值为函数时也要注意一点，那就是返回的对象不能是外部定义的
否则一旦data选项变为对象了，那么由于是引用的同一对象，所有的更改都会同步。
正常情况：各组件调用独立

非正常情况：各组件调用不独立

3.HTML限制
在某些时候，vue组件会受到html的限制，比如table内就只能写行列，select内只能写option等，这个时候组件直接写进去就会无效，此时我们就可以使用is属性来实现。

没加is前

加了is后

当然，后面我们会学习单文件.vue组件的写法，那时就不会存在这个问题了。

在非单文件组件时的项目文件的开发调用
1.Index.html单独一个文件
2.每个组件一个js文件
3.实例化vue对象一个文件
4.然后在js文件里面调用，各个js文件，创建vue实例的那个js应该放在最后面调用。

局部注册

概述
至此，我们的组件都只是通过 Vue.component 全局注册的：

Vue.component('my-component-name', {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例。
然而，有时候我们想构建一些只能为当前应用所使用的组件，这个时候我们就可以使用局部组件了。局部组件只在该实例作用域下有效。
如何使用局部组件
Vue实例中有个选项components可以注册局部组件，注册后就只在该实例作用域下有效。

组件中嵌套
组件中也可以使用components选项来注册组件，使组件可以嵌套。

备注：
可以在组件的components选项中声明多个组件，
在components中：每个组件都是一个键值对。键名为组件名，键值为组件内容。
在组件中定义子组件时，可以使用外部定义对象作为组件内容

组件调用时可以直接使用单标签形式

<div id="app">
<person-message></person-message>
<person-message />
</div>