3 常见问题

注册组件:全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})
            

注册组件:局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建 系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的 构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

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

基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它 们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
            

这里介绍一个可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的代码

通过 Prop 向子组件传递数据

Prop 验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

                     props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
}
            

单向数据流

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

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

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
            

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或 对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

自定义事件

通过prop属性，父组件可以向子组件传递数据，而子组件的自定义事件就是用来将内部的数据报告给父组件的。

父组件使用时  @updateParmas="updateVideo"
子组件内  this.$emit('updateParmas', 这是我暴露出去的数据)
            

子组件通知父组件执行updateParmas函数

.sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子 组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

所以官方推荐以 update:my-prop-name 的模式触发事件取而代之。举个例 子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

            <text-document v-bind:title.sync="title"></text-document>
            this.$emit('update:title', newTitle)
            

slot插槽

slot相当于子组件设置了一个地方，如果在调用它的时候，往它的开闭标签 之间放了东西，那么它就把这些东西放到slot中。

 <my-component>
    <p>这是一些初始内容</p>
  </my-component>
            

5.编码实战

子组件通知父子更新的两种方法

                    this.$emit('updateParmas','暴露一个值')// 不加.sync修饰符直接给父组件传事件，在父组件中修改props

                     this.$emit('update:test', newValue )// 可以加上.sync修饰符在子组件内修改props