vue中关于自定义input组件和CheckBox组件的v-model与父组件之间传值

input使用

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

input组件不需要设置model属性，默认model为 props:value,  event: input

 

父组件使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <cu-input v-model="val"></cu-input>
    {{val}}
  </div>
</template>

<script>
import input from "./input";
export default {
  data() {
    return {
      val: "123",
     
    };
  },

  props: {
    msg: String,
  },
  components: {
    "cu-input": input
  },
};
</script>

 

 

 

checkbox使用

子组件：

<template>
  <div>
    <input 
         type="checkbox" 
         @change="$emit('change',$event.target.checked)" :checked="value" />
  </div>
</template>
<script>
export default {
  name: "checkout",
  props: {
    value: {
      type: Boolean,
      default: true,
    },
  },
  model: {
    event: "change", //要触发的事件
  },
};
</script>

此处注意model属性事件默认为input事件，值为value

 

父组件使用

<template>
  <div class="hello">
    <cu-checkout v-model="val1" :value="val1" />
    {{val1}}
  </div>
</template>

<script>
import checkout from "./checkbox";
export default {
  data() {
    return {
      val1: true,
    };
  },

  components: {
    "cu-checkout": checkout,
  },
};
</script>

注意此处的value属性绑定，v-model自动会联动子组件change事件