当前位置： 移动技术网 > 移动技术>移动开发>Android > 自定义组件的v-model

自定义组件的v-model

2020年07月24日  | 移动技术网移动技术  | 我要评论

若想封装表单上通用或美化组件，可用自定义组件v-model来实现，默认props为value和事件为input

input[type=“text”]的自定义组件

父组件上代码

<template>
  <div>
    <input-model v-model="inputVal" />
    {{inputVal}}
  </div>
</template>
<script>
import InputModel from "@/components/InputModel.vue";
export default {
  data() {
    return {
      inputVal: "默认值"
    };
  },
  components: {
    InputModel
  }
};
</script>

子组件InputModel.vue上代码

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

input[type=“checkbox”]的自定义组件

父组件上代码

<template>
  <div>
    <checkbox-model v-model="checked" />
    {{checked}}
  </div>
</template>
<script>
import CheckboxModel from "@/components/CheckboxModel.vue";
export default {
  data() {
    return {
      checked: false
    };
  },
  components: {
    CheckboxModel
  }
};
</script>

子组件CheckboxModel.vue上代码

<template>
  <div>
    <label>
      <input type="checkbox" :checked="checked" @input="$emit('change',$event.target.checked)" />
      {{label}}
    </label>
  </div>
</template>
<script>
export default {
  name: "CheckboxModel",
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  }
};

本文地址：https://blog.csdn.net/qq_31093255/article/details/107516978

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网