Vue_学习笔记_2

(ง •_•)ง (ง •_•)ง (ง •_•)ง

一、组件

1.组件名大小写

Vue官方文档：当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说  和  都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

个人理解：避免使用驼峰式给组件命名。

2.注册组件

全局注册/局部注册；是/否使用模块系统注册

二、Prop

1.属性命名

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

个人理解：避免使用驼峰式给属性命名。

2.Prop类型

不指定类型：

props: ['title','likes','isPublished','commentIds','author']

指定类型：

props: {

    title:String,

    likes:Number,

    isPublished:Boolean,

    commentIds:Array,

    author:Object

}

3.静态/动态赋值

静态赋值：

动态赋值：

4.单向数据流

a.父级prop的更新会向下流动到子组件中；

b.在子组件内部不应改变prop。

两种常见的改变prop的情景：

情景一：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值。

情景二：

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性。

5.prop验证

Vue.component('my-component', {

    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['success','warning','danger'].indexOf(value) !==-1

        }

    }

  }

})

6.非prop的特性

从父组件传入的class和style属性会与子组件根元素中的属性值合并，但是其它属性从父组件传入子组件后则会替换掉子组件根元素对应属性的值。

在组件定义的选项中使用inheritAttrs:false，可以禁止组件根节点继承特性；结合$attrs，可以指定在组件中由谁来继承父级传入的特性。