vue-day03 组件基础

组件

在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指令来遍历渲染对象中的不同的数据。

未完待续！