组件
在vue中，组件是可复用的vue实例。通俗的来说，就是比如之前html,css中经常使用的盒模型布局，其中一个大的div即可看作一个组件，抑或是在不同的功能板块儿中，都可以看做一个组件。
在vue中注册组件的格式
组件的命名方式
命名方式：
在vue中注册组件的命名方式，你可以选择使用 短横线分隔命名（比较推荐），也可以使用首字母大写(类似java中的命名方式)。 强烈推荐 短横线分隔。
全局注册
Vue.component('blog-bar',{
props:['title','content'],
template:`<div><h1>{
{title}}</h1><br><span>{
{content}}</span></div>`
});
在props属性中，可以自定义组件的封装属性。然后在template中，使用模板字符串来创建你想要的组件的格式，注意需要使用一些标签作为根标签进行包裹，否则会一些标签会丢失。
局部注册
let app2 = new Vue({
el:"#app2",
data:{
},
components:{
"blog-post":{
props:['title'],
template:'<h3>{
{title}}</h3>'
}
}
})
在vue实例中的components属性里面来注册组件，其语法与全局注册基本类似。
全局注册VS局部注册
全局注册就是 Vue.component 这样会导致我们在一些项目中，加载很多不必要的组件，造成了资源的浪费,局部注册的话就是 在自己创建vue的实例中来注册组件.
注意局部注册的组件在其子组件中不可用。如果想在别的组件中使用另一个局部注册的组件，那么你就在别的组件里面注册就行.可以采用下面的方式：
let app3 = new Vue({
el:'#app3',
component:{
testA:{
data:{
}
template:'<p>我是局部组件testA</p>'
}
}
});
prop属性详细介绍
通过prop向子组件传递数据
在组件中添加props属性可以传递值 比如一个组件用来传递你的博文名称…
在自定义组件中，可以自己添加一些属性 也是通过props来添加，然后传递数据的话就直接{
{}}即可。
let app2 = new Vue({
el:"#app2",
data:{
},
components:{
"blog-post":{
props:['title'],
template:'<h3>{
{title}}</h3>'
}
}
})
props以字符串数组形式的，没有默认值类型—所以你可以灵活的使用v-bind指令来将其绑定数据.props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但我们通常，为了严谨，所以你应该给每一个prop都指定具体的数据类型（值类型）so 如下:
props:{
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}
这样的话会有一个好处，当你提供了默认类型后，浏览器的控制台里面就会提示。(注意，如果提供默认类型的话，则props不能再使用[]而是使用{}).
同理，你也可以对prop添加计算属性进行一些原始数据的转换.比如字符串分隔。。。根据需求来。
然后 是有一个组件认证 —这些你都先可以想想，框架一定为我们提供了什么功能，然后就一看就懂了
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
禁用组件继承:
在组件中添加 inheritAttrs: false,inheritAttrs: false 选项不会影响 style 和 class 的绑定。
几个小例子
计数器
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('button-counter',{
data:function () {
return{
count:0
}
},
template:'<button v-on:click="count++">点击我{
{count}}</button>'
});
let cpdemo = new Vue({
el:'#components-demo'
});
为了使每个计数器，不会影响到其他的计数器。一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
博文小组件
<div id="app3">
<blog-all
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:author="post.author"
v-bind:time="post.time"
>
</blog-all>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app3 = new Vue({
el:'#app3',
data:{
posts:[
{id:1,title:"前端三剑客知识点概览",author:"杀手一只知更鸟",time:'2022-12-01'},
{id:2,title:"Java学习路线",author:"debuger",time:'2022-12-07'},
{id:3,title:"ssm框架整合+springBoot学习",author:"杀手一只知更鸟",time:'2022-12-21'},
{id:4,title:"前后端分离的完整项目",author:"杀手一只知更鸟",time:'2022-12-21'}
]
},
components:{
'blog-all':{
props:{
'id':Number,
'author':String,
'title':String,
'time':String
},
template:'<div><h3>{
{title}}</h3><p>{
{author+time}}</p></div>'
}
}
});
在组件中，可以灵活的使用v-bind属性来动态绑定数据，并且通过v-for指令来遍历渲染对象中的不同的数据。
未完待续！
