2019-11-01vue组件基础

1.在组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

等价于

当用在组件上时，v-model 则会这样：

为了让它正常工作，这个组件内的  必须：

将其 value 特性绑定到一个名叫 value 的 prop 上

在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

Vue.component('custom-input', {

  props: ['value'],

  template: `

   

      v-bind:value="value"

     v-on:input="$emit('input', $event.target.value)"

   >

  `})

现在 v-model 就应该可以在这个组件上完美地工作起来了

2.Prop 的大小写

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {

  // 在 JavaScript 中是 camelCase 的  props: ['postTitle'],

  template: '

{{ postTitle }}

'})

3.事件名最好也用kebab-case (短横线分隔命名）

this.$emit('myEvent')

并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

4.自定义组件的v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {

  model: {

    prop: 'checked',

    event: 'change'  },

  props: {

    checked: Boolean  },

  template: `

   

      type="checkbox"

      v-bind:checked="checked"

      v-on:change="$emit('change', $event.target.checked)"

    >

  `})