参考地址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: `<inputtype="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">改变内容&l