【Vue】组件注册 && Prop

1. 组件注册

• 组件名规则
  1. W3C规范规定组件命名时推荐使用短横线隔命名法kebab-case
  2. Vue文件可以使用自闭和的自定义元素，而html 是不允许的

1.1 全局注册

Vue.component 来创建全局组件，它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

//js
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

//html

  
  
  

1.2 局部注册

使用 webpack 等构建工具时，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。这个时候可以考虑使用局部注册.
可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
//对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

【注意】注意局部注册的组件在其子组件中不可用

//如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

---

2. Prop

2.1 Prop的类型：

• 可以以字符串数组形式列出prop:

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

• 若使每一个prop都有一个指定值类型的方法：

      //这些属性的名称和值分别是 prop 各自的名称和类型：
       props: {
          title: String,
          likes: Number,
          isPublished: Boolean,
          commentIds: Array,
          author: Object,
          callback: Function,
          contactsPromise: Promise // or any other constructor
      }

• prop值类型总结：

        Vue.components('x-component', {
    ... //省略其他选项
    props: ____?_____
})

// ____?_____处的值可以是以下：
 ['title', 'likes', 'isPublished', 'commentIds', 'author']
 {propA: Number}
 {propB: [String, Number] }
 {propC: { type: String, required: true } }
 {propD: { type: Number, default: 100 }}
 {propE: { type: Object, default: function () { return { message: 'hello' } } } }

2.2 传递prop

• 传递静态prop

• 传递动态prop

• prop传值可以是任何类型的值

2.3 单向数据流

• 不应该在一个子组件内部改变（父组件传给它的）prop。如果这样做了，Vue 会在浏览器的控制台中发出警告。
• 有些情况下，我们实在想要改变 prop，可以考虑定义一个本地的 data 属性，并将这个 prop 用作其初始值
• 有些情况下，我们需要转换 prop 的值。那么可以使用计算属性
• 假设某个 prop 是一个对象，如 props.user = {name:'frank'}，如果子组件改变了 user.name，那么 Vue 会检测不到这种违反约定的代码，导致父组件的状态受到影响。