自定义组件v-modle

父

<template>
  <div id="app">

    <BaseInput v-model="message"></BaseInput>
    <BaseInput :value="message" @input="message = $event"></BaseInput>
    <p>data:{{message}}</p>
    <hr>
    <base-checkbox v-model="checked" />
    <base-checkbox :checked="checked" @change="message = $event"></base-checkbox>
    <p>已经点赞{{checked}}</p>
  </div>
</template>

<script>

import BaseInput from './components/BaseInput.vue'
import BaseCheckbox from './components/BaseCheckbox.vue'

export default {
  name: 'App',
  data() {
    return {
      message: "hello world",
      checked: true
    }
  },
  components: {
    BaseInput,
    BaseCheckbox
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

input子

<template>
  <div>
    <input type="text" :value="value" @input="handleInput">
  </div>
</template>

<script>
export default {
  name: "BaseInput",
  props: ['value'],
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value)
    }
  }
}
</script>

<style>
</style>

checked子

<template>
  <div>
    <input type="checkbox" :checked="checked" @change="handleChange" /> 点赞

  </div>
</template>

<script>
export default {
  name: 'BaseCheckbox',
  model: {
    prop: "checked",
    event: "change"
  },
  props: ['checked'],
  methods: {
    handleChange(e) {
      this.$emit('change', e.target.checked)
    }
  }
}
</script>

<style>
</style>

image.png