vue系列笔记（三）------vue组件

一 、组件基础(组件就是自定义标签)

        1 定义组件名称

           (1) 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义                    元素时使 用 kebab-case. eg:<my-component-name></my-component-name>

           (2) PascalCase (驼峰式命名) eg:<MyComponentName></MyComponentName>

        2 创建组件

           (1) 全局组件：Vue.component只能通过它来创建全局组件

                eg:

                     Vue.component('组件名称',{组件对象})

           (2) 局部组件：局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无                   效。components定义所需要的组件 

               eg:

                    components: {

                     '自定义元素的名字':组件的选项对象,

                      }    

二、组件中的props属性

       1 props是什么？

           props选项就是设置和获取标签上的属性值的。

       2 props如何定义属性和取值

           eg:

                props: {

                   author:Object

                }

             以对象形式列出 prop，属性的名称和值分别是 prop 各自的名称和类型

            prop可以传入number、String、Object、Boolean、Array

          注意：我们定义的属性中一般带有"-"来进行命名，这时在props里边就应该使用小驼峰式              写法。

          取值是使用{{}} 双花括号进行取值的

       3 构造器中想组件传值使用v-bind

三 、父子组件

       1 在构造器的外边定义好局部组件，然后通过components在构造器引用就可以

          eg:

         在构造器外边定义局部组件

         var 组件名称 = { template:'   '}

        在构造器里边使用components引用

         components:{'组件名称'：组件对象}

       使用

        <组件名称></组件名称>