vue2和vue3 组件中v-model的使用方式

记录一下vue中v-mode在组件上的一些使用方式，看这一篇就够了

vue2基础使用

父组件

<template>
  <div>
    <h1>我是父组件：{{ count }}</h1>
    <Child v-model="count" />
    // 等价于
    //<Child :value='count' @input='count=$event' />
  </div>
</template>

<script>
import Child from '@/components/child'
export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

子组件

<template>
  <div>
    <h1>我是子组件: {{ value }}</h1>
    <button @click="clickHanlde">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    clickHanlde() {
      this.$emit('input', this.value + 1)
    }
  }
}
</script>

vue2中model自定prop和触发事件

父组件

<template>
  <div>
    <h1>我是父组件：{{ count }}</h1>
    <Child v-model="count" />
    // 等价于
    //<Child :count='count' @changeCount='count=$event' />
  </div>
</template>

<script>
import Child from '@/components/child'
export default {
  components: {
    Child
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

子组件

<template>
  <div>
    <h1>我是子组件: {{ count}}</h1>
    <button @click="clickHanlde">+1</button>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'count',
    event: 'changeCount'
  },
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    clickHanlde() {
      this.$emit('changeCount', this.count + 1)
    }
  }
}
</script>

vue3中组件中使用v-model

父组件

<template>
  <div>
    <h1>我是父组件：{{ count }}</h1>
    <Child v-model="count" />
    <!-- <Child :modelValue="count" @update:modelValue="count = $event" /> -->
  </div>
</template>

<script>
import Child from './components/Child.vue'
import { ref } from 'vue'
export default {
  components: {
    Child
  },
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

子组件

<template>
  <div>
    <h1>我是子组件: {{ modelValue }}</h1>
    <button @click="clickHanlde">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
  },
  emits: ['update:modelValue'],
  setup(props, context) {
    const clickHanlde = () => {
      context.emit('update:modelValue', props.modelValue + 1)
    }
    return { clickHanlde }
  }
}
</script>

vue3在组件上使用多个v-model

父组件

<template>
  <div>
    <h1>我是子组件: {{ modelValue }}--------{{ text }}</h1>
    <button @click="clickHanlde">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue', 'update:text'],
  setup(props, context) {
    const clickHanlde = () => {
      context.emit('update:modelValue', props.modelValue + 1);
      context.emit('update:text', props.text + 1);
    };
    return { clickHanlde };
  },
};
</script>

子组件

<template>
  <div>
    <h1>我是父组件：{{ count }}-------{{ msg }}</h1>
    <Child v-model="count" v-model:text="msg" />
  </div>
</template>

<script>
import Child from './components/Child.vue';
import { ref } from 'vue';
export default {
  components: {
    Child,
  },
  setup() {
    const count = ref(0);
    const msg = ref('');
    return { count, msg };
  },
};
</script>

vue3 script setup语法糖中使用v-model

父组件

<template>
 <h1>我是父组件：{{ count }}-------{{ msg }}</h1>
 <Child v-model="count" v-model:text="msg" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const count = ref(0)
const msg = ref('')
</script>

子组件

<template>
  <div>
    <h1>我是子组件: {{ modelValue }}--------{{ text }}</h1>
    <button @click="clickHanlde">+1</button>
  </div>
</template>

<script setup>
  const props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    },
    text: {
      type: String,
      default: ''
    }
  })
  const  emits = defineEmits(['update:modelValue', 'update:text']);
  const clickHanlde = () => {
    emits('update:modelValue', props.modelValue + 1)
    emits('update:text', props.text + '1')
  }
</script>

<style></style>