自定义v-model

184 阅读1分钟

使用默认的value、input

父亲组件:

<template>  <div>    <input type="text" v-model="keyWords">    <child v-model="keyWords"></child>  </div></template><script>import child from './child';export default {  components: {    child,  },  data() {    return {      keyWords: '',    };  },};</script>

子组件:

<template>  <div>    <input type="text" :value="value" @input="$emit('input', $event.target.value)">  </div></template><script>export default {  props: {    value: {      type: String,      default: '',    },  },};</script>

使用model选项改变默认的value、input

父亲组件:不变

子组件:

<template>  <div>    <input type="text" :value="inputValue" @input="$emit('changeValue', $event.target.value)">  </div></template><script>export default {  model: {    prop: 'inputValue',    event: 'changeValue',  },  props: {    inputValue: {      type: String,      default: '',    },  },};</script>