自定义组件实现v-model

  • 要使自定义的Vue组件支持v-model,需要实现一个名为value的prop和一个名为input的事件。
  • 在组件内部,将value prop 绑定到组件的内部状态,然后在对内部状态进行修改时触发input事件。

自定义UI组件

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    value: String
  }
};
</script>


使用组件

<template>
  <div>
    <my-input v-model="message" /> 
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

你可能感兴趣的:(前端,javascript,vue.js)