VUE学习篇（三）：表单输入绑定与基础组件

表单的输入绑定

• 基础用法：

  • 表单的所有数据都需使用v-model绑定，不管组件类型为何，元素初始值的特性为何，都会将v-model绑定的值作为数据来源。
  • v-model在内部为不同的元素使用不同的属性，并抛出不同的事件。
  • 复选框：单个绑定布尔值，多个绑定到数组
  • 单选按钮：绑定字符串
  • 选择框：单选绑定字符串（ios需要特殊处理），多选绑定数组

• 修饰符

  • v-model.lazy 默认情况下情况下，v-model在每次input后将输入框的值与数据同步，.lazy修饰符将转变为change之后再同步。
  • v-model.number 能将用户输入的值转变为数字
  • v-model.trim 自动过滤用户输入的首位空格

基础组件

• 基本用法：
  • 组件是带有名字的vue实例
  • 引入后可作为自定义元素使用
  • 组件是可复用的vue实例，接受与vue实例相同的选项，data（以函数形式返回），method以函数形式返回s，components，生命周期
  • 区别：el选项是根实例特有
  • 组件可被无数次复用，而每一次复用都会创建一个新的组件实例，组件的数据都是独立维护的
  • data选项必须以函数形式存在，方便维护
• 组件的注册：

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

全局注册：组件注册之后可以在根实例创建之后的任何地方引用。

• prop——向子组件传递数据

  • prop是指可以在组件上注册的一些自定义属性，当有值传递给prop的时候，就成了组件的属性
  • 在组件里面用props接受，可以将prop全部包含在其中
  • 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop
    [color=#f20257] 当组件越来越复杂时，传入的prop也就会越来越多，可以尝试将所所有属性放入一个对象中[/color]

• 单个根元素

  • 一个组件只能有一个根元素

• 监听子组件的事件

  • 父组件：通过v-on监听子组件的任何自定义事件
  • 子组件：在触发事件时通过调用内建的$emit方法，并传入事件名，父组件就能监听到，并做出处理
  • 子组件可以通过$emit的第二个参数传值，当父组件监听到这个方法的时候（也就是事件触发的时候），这个值就会作为第一个参数传入这个方法

• 通过插槽分发内容

  • 向组件中加入内容是很常见的需求，vue通过插槽来向组件添加内容，通俗点说就是需要添加内容的地方用slot标签占位，当自定义组件中传入内容时会自动替换掉slot标签。

• 动态组件

  • 在组件中绑定is属性，通过is属性的值控制切换的组件，is的值可以是已注册组件的名字，或者是组件的选项对象。