Vue深入了解组件（三）-自定义事件

监听事件和prop属性名称方面不太一样，prop属性名若是驼峰命名，在组件调用赋值的时候需要改为key-base的样式，但是监听事件的不会，写啥是啥。

------------------组件中的触发代码
this.$emit('myEvent')
------------------调用时的监听代码
<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>
<!-- 有效果的 -->
<my-component v-on:myevent="doSomething"></my-component>

HTML大小写不敏感，巨尴尬，所以在前端属性命名这个事情上尽量去使用key-base的格式，不要用驼峰。

自定义组件的 v-model

首先理解一下v-model

v-model=v-on:input+v-bind:value
//也就是
<input type="text" :value="price" @input="price=$event.target.value">

• 将输入框的值绑定到price变量上，这个是单向绑定，意味着改变price变量的值可以改变input的value，但是改变value不能改变price

• 监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变price的值

这样就实现了双向绑定。

当我们给组件棒v-model的时候，首先组件的props需要一个一个value属性来接收父组件到子组件的值，其次如果子组件中是input，那么我们需要在子组件中写一个input触发事件，从而触发一个名字叫做input的自定义事件。

<custom-input v-model="searchText"></custom-input>
------------------------
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

官网示例用到了一个叫model的块，具体如下：

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>

将原生事件绑定到组件

原生事件：就是input、change、click…等等这一类的。
对于给组件设置响应事件，有俩种方式一种是定义自定义的事件、一种是现在要说的，第一种请自行翻阅之前写的。
.native这个修饰符的作用：

它的作用是在某个组件的根元素上监听一个原生事件。可以使用 v-on:+原生事件名称+.native。给普通的HTML标签监听一个事件，之后添加 .native 修饰符是不会起作用的。

但是如果组件中要被监听的标签元素不是组件的根节点，那么它将不会有任何作用也不会报错。怎么解决呢？
当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。
找了个例子：原生事件绑定Vue组件解析