vue 自定义组件绑定model+弹出选择支持上下按键选择

参考地址v-modelhttps://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-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)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：
<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

主要需要在子组件增加mode,实现绑定的值和事件

关键点

model双向绑定,属性接收两个参数,类型：{ prop?: string, event?: string }
1.prop 也就是调用该组件的父组件中使用v-model指令绑定的属性
2.event 对应的是修改prop指定属性的值的函数

子组件中需要在data里声明个变量取父窗口通过prop传来的值

子组件触发改变内容, 创建方法onChange

第1个参: 是 model里event指定的change,

第2个参: 是 model里prop指定的变量,修改此变量,父窗口通过v-model就实现了双向绑定

onChange(){
          this.$emit('change','子组件触发改变了内容 ')         
 }

子组件代码

<template>
    <div>
        <!-- 
        {
  { dataVal }}
        <p><button @click="onChange">改变内容</button></p>
         -