vue组件学习整理

1.局部注册的组件在其子组件中不可用。

2.对于props值，在 JavaScript 中是 camelCase 的；在html中是 kebab-case 的；在字符串模板中不受限制。

 props: {
    propA: Number, // 基础的类型检查 (`null` 匹配任何类型)
   
    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  // 必须匹配下列一个
      }
    }
 
 }

3.事件名：
this.$emit('myEvent')，  因为 HTML 是大小写不敏感的)，所以v-on:myEvent将会变成v-on:myevent——导致myEvent不可能被监听到。

 所以，事件名推荐使用：kebab-case或者全小写

4.插槽：

示例：

普通插槽：

子组件：

  


父组件：

      //可以插入一个组件
  Your Profile                                           //可以插入文本
                         //可以插入html



子组件：

  Submit                //插槽的默认内容为'Submit',当有对应内容时'Submit'即被覆盖

具名插槽（一个子组件需要多个插槽）：

子组件：

  

    
  
  

                                         //未命名插槽叫做默认插槽
  
  

    
  



父组件中（template用法）：

  

  
A paragraph for the main content.
             //未命名的内容会匹配到未命名的插槽上
  
And another one.

  



父组件中（普通元素用法）：

  
Here might be a page title

  
A paragraph for the main content.
              //未命名的内容会匹配到未命名的插槽上
  
And another one.

  
Here's some contact info