props 用于接收父组件传递的数据，需要在子组件的选项 props 中预先设置会有哪些 prop，可以以字符串数组形式列出，也可以以对象形式列出（可指定 prop 接收的数据类型、默认值、是否必须、验证条件等）。

需要注意以下几点：

• ==如果在父组件中传入的数据是非字符串的，需要通过绑定 v-bind:propName 的方式来传递（即使传递纯数字这一类的静态值）==；否则直接传递数据都会转换为字符串。
• 如果 prop 是 Boolean 类型，但在使用组件中没有设置该 prop 时，则实例化后该组件的这个 prop 预设为 false；而使用组件时，设置了该 prop 但没有提供 true/false 值（no value 的情况），就会设置为 true。由于布尔类型不是字符串，正确传递方式是使用 v-bind 来传递非字符串的数据
  Play Video
• prop 应该遵循==单向数据流==，即不应该在子组件中修改 prop 值（因为这些数据是在父层的），如果希望从子组件触发 prop 值的修改，可以通过子组件 $emit('eventName', value) 抛出事件，同时传递需要更新的数据，然后在父级组件中监听事件，在回调函数中做修改。:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 或者以 prop 值作为初始值或响应依赖：
  • 以 prop 传递来的数据作为一个初始值，在子组件接下来，拷贝到自己 data 的一个变量中
  • 基于 prop 定义一个计算属性，实现对原始的值的转换
  
  Play Video

如果希望将一个对象的所有属性「拆分」为多个 prop 分别传入，可以使用不带参数的 v-bind（即 v-bind="obj"，而非 v-bind:propName="obj"），:IconCustom{name="mdi:youtube" iconClass="text-red-500"} 所以可以将大量的 prop 包装进一个对象，一次绑定到组件上

Play Video

可以对 prop 进行限制，确保传递进来的值符合要求。有多个属性可以进行设置

// ...
props: {
  propA: {
    type: String,
    required: true,
    default: 'abc',
    validator: func()   // 自定义验证函数，返回 true/false
  }
}

当组件需要修改父层控管的数据（这些数据通过 props 传递进来）时，基于单向数据流原则不能在组件内进行修改，而是需要通过 $emit('eventName', value) 向外抛出自定义的事件，通知父层进行数据修改，其中 value 一般是向外传递的需要变动的数据。

Play Video

==Vue 对于具有表单元素 <input> 的输入型组件，支持使用 v-model 实现类似「双向绑定」的效果==。但在该组件内部需要进行 input 事件监听，并手动 $emit('change'， $event.target.value) 抛出该事件和用户输入的数据，让变量数据的修改仍在父层完成。

• 在外部（引用该组件时，在组件的标签上）通过指令 v-model 双向绑定需要同步的变量，它的数据作为 prop 传递到组件内（因此记得在组件内部需要在 props 选项里声明 value 作为 prop），作为子组件内部表单元素的 value 属性的值
• 在组件内使用指令 v-bind 将表单元素表单元素的 value 属性绑定到以上声明的 prop 变量上，即 v-bind:value="value"（这样就可以将外部传进来的值作为表单的值，实现与外部数据的「同步」）
• 在组件内使用指令 v-on 监听表单元素 change 输入事件，并通过抛出事件 $emit('input', $event.target.value) 向外传递相应的数据。这样在父组件中通过指令 v-model 绑定的变量就会基于抛出的数据进行改变 （即数据的修改的操作还是在父层完成）

// component
Vue.component('base-checkbox', {
  props: ['value'],
  template: `
    <input
      type="text"
      v-bind:value="value"
      v-on:change="$emit('input', $event.target.value)"
    >
  `
})

<base-input v-model="inputText"></base-input>

通过遵守这种设置,在使用输入型的组件时仅需简单地以 v-model 的方式，方便地实现数据从父组件传递给子组件，并将用户输入改动 $emit 给父组件进行修改，实现类似「双向绑定」的效果。

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入子组件，作为 prop checked 的值；而当 <base-checkbox> 抛出 change 事件并附带一个新的值时，这个所绑定的变量 lovingVue 将会被更新。

Play Video

Vue 还为一般的组件提供 .sync 修饰符，和一个以特定前缀 update 命名的事件，让 prop 变量实现类似于「双向绑定」的效果，更方便地从子组件中「修改」父层传入的数据。

在使用组件设置 prop 时，==如果在绑定变量时 v-bind:propName.sync="variable" 添加 .sync 修饰符，就可以省略在父层设置监听事件和回调函数这一步==。

Vue 会自动监听子组件抛出的以特殊形式命名的事件 this.$emit('update:propName', newValue)（事件以特定模式 update:propName 命名），然后在父层对 prop 绑定的变量进行更新。

Play Video

可以在组件定义的模板中设置多个插槽，并为它们设置属性 name，它们称为具名插槽 <slot name="slotName"></slot>。

在使用组件时，使用 <template> 元素作为容器（该标签本身不会被渲染到页面上），并以==带参数的指令 v-slot:slotName 的形式 <template v-slot:slotName>content</template> 将提供的内容分发到相应名称的插槽==。

Play Video

当模板中存在多个具名插槽 <slot> 时，可以有一个不具名插槽，它作为默认插槽（实际上带有隐含的名字 v-slot:default）。在使用组件时，任何没有被包裹在带有指令 v-slot:slotName 的 <template> 中的内容都会被视为默认插槽的内容。

由于使用组件时，是在父层指定插入的内容，所以这些内容现在父级作用域进行编译，它们只能访问父层的数据。

Play Video

如果希望可以访问组件中才有的数据，需要使用作用域插槽 <slot v-bind:variable="value">，即在定义组件时，在插槽中预先将允许访问的数据绑定到变量上，这些绑定到 <slot> 的属性称为插槽 props

然后在使用组件时，可以==为指令 v-slot 设置值 <template v-slot:slotName="objName">，该值是一个对象，它包含所有在组件内绑定的插槽 props==，然后就可以通过 objName.variable 的方式来读取子作用域才有的数据。除了使用 objName「接收」内层抛出的所有 props，还可以使用 ES6 解构的方式直接 <template v-slot:slotName="{ variable }"> 获取单个 variable ，便于后面调用。

<!-- 子组件 current-user 的模板 -->
<span>
  <slot v-bind:user="user">
    {{ user.firstName}} {{ user.lastName }}
  </slot>
</span>

<!-- 使用组件 current-user -->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
<!-- 解构的方式接收特定的 prop -->
<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

Play Video

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>