Vue学习与整理（二）：组件

目录

1.组件名规范

2.全局注册

3.局部注册

4.prop

5.prop验证

---

1.组件名规范

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

// 使用 kebab-case(优先使用，兼容更好)
Vue.component('my-component-name', { /* ... */ })

//使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })

2.全局注册

全局注册的组件在各自内部可以相互使用。

<div id="app">
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
</div>

<script>
    Vue.component('component-a', { /* ... */ })
    Vue.component('component-b', { /* ... */ })
    Vue.component('component-c', { /* ... */ })
    new Vue({ el: '#app' })
</script>

3.局部注册

<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>

<script>
    var ComponentA = { /* ... */ }
    var ComponentB = { /* ... */ }
    var ComponentC = { /* ... */ }
    
    new Vue({
      el: '#app',
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB
      }
    })
</script>

4.prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

<div id="app">
    <div>
        <input v-model="parentMsg">
        <br>
        <child-component v-bind:message="parentMsg"></child-component>
    </div>
</div>

<script>
    Vue.component('child-component',{
        props:['message'],
        template:'<span>{{message}}</span>'
    })

    var vm = new Vue({
        el:'#app',
        data:{
            parent:'父组件内容'
        }
    })
</script>

5.prop验证

Vue.component('my-component', {
  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
      }
    }
  }
})