组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率
**
**
**
**
延伸阅读：https://blog.csdn.net/YYxiaobao0726/article/details/86577481
1.组件命名： 短横线： 驼峰式： 注：如果是驼峰式，在引用时必须将其展开:my-component
2.基本用法：
全局注册 [父、根组件]
<div id="app"> <my-component></my-component> </div>
Vue.component('my-component ', { template:{`<div> <h1>......</h1> <p>......</p> <span>......</span> ... </div>` } })
let vm = new Vue({ el:"#app", });
驼峰式：
<div id="app"> <my-component></my-component> </div>
Vue.component('myComponent ', { //驼峰式，在引用时必须将其展开
template:{`<div> <h1>......</h1> <p>......</p> <span>......</span> ... </div>` } })
let vm = new Vue({ el:"#app", });
父子组件传值
在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 props 给子组件下发数据(3)，子组件通过事件给父组件发送消息(3)。
工作原理如下图
组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。
在组件中，使用选项props 来声明需要从父级接收的数据， props 的值可以是两种:
一种是字符串数组，一种是对象
2-1 字符串数组
<div id="app">
<my-component message="数据来自父组件">
</my-component>
</div>
Vue.component(
'my-component',
{ props: ['message'],
template: '<div>{{message}}</div>' });
var app4 = new Vue({ el: '#app' });
渲染后的结果为：
<div id=”app4”>
<div ＞来自父组件的数据</div>
</div>
★★★
props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板 template 及计算属性computed 和方法methods 中使用。
数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。
有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令 v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。
<div id="app">
<input type="text" v-model="text">
<my-component :value="text"></my-component>
</div>
Vue.component(
'my-component',
{
props: ['value'],
template: '<div>{{value}}</div>'
}
);
var app5 = new Vue({
el: '#app',
data: {
text:'动态传递父组件数据'
}
});
需要注意的点:
-
如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。
-
如果你想把一个对象的所有属性作为 prop 进行传递，可以使用v-bind:value=”对象名”的方式来传递，其中 value 指的是props传递的变量名:
todo:{
text:"working hard at VUE",
isComplate:true
}
然后:
<todo-item v-bind=”todo”></todo-item>
**将等价于: **
<todo-item
v-bind:value=”todo.text”
v-bind:is-complete=”todo.isComplete” >
<todo-item>
2-2 对象
当prop 需要验证时，就需要对象写法。
一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。
Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 }