学习-vue3 组件上使用 v-model

 

<template>
  <div>
    v-model测试父组件
  <!-- <test-model :model-value="txt" @update:model-value="txt=$event"></test-model> -->
  <test-model v-model="txt"></test-model>
  {{txt}}
  </div>
</template>

<script>
import testModel from '../components/testModel.vue'
export default {
  components: {
    testModel
  },
  data () {
    return {
      txt: '测试'
    }
  }
}
</script>

<style>

</style>

<template>
  <div>v-model测试子组件</div>
  <button @click="click">点击</button>
</template>

<script>
export default {
  emits: ['update:modelValue'],
  data () {
    return {}
  },
  methods: {
    click () {
      this.$emit('update:modelValue', '测试22222')
    }
  }
}
</script>

<style>

</style>