vue3中的v-model，没有原理，只讲用法！！

多的不说，理论啥的官网都有，那么平时我们该怎么用呢？
让我来娓娓道来！

1、我们要做些什么？

• 首先在父组件声明一个变量a=11111
• 在子组件中创建一个按钮来改变这个a让它变成22222

2、 代码部分

父组件

<template>
  这是父组件：{{ a }}
  <br>
  <MyChildren
    v-model:name_a="a"
  ></MyChildren>
</template>

<script setup>

import { ref } from 'vue'

// 我们声明了一个a变量，并且让它在html中展示出来
const a = ref(11111)

</script>

这是子组件

<template>
  子组件：{{ props.name_a }}
  <a-button @click="become2">
    变二按钮
  </a-button>
</template>

<script setup>

const props = defineProps({
  // 子组件里接收了父组件中a,但我们给它另外起个名字叫name_a
  name_a: {
    type: Number,
    required: true
  }
})

// 注意这里要加上"update:"
const emits = defineEmits(['update:name_a'])

// 我们定义一个变2函数
const become2 = () => {
  // 第一个参数是emit的名字，第二个参数写入要修改成的值
  // 注意的是，第二个参数的类型要与props中的type对应哦！
  emits('update:name_a', 22222)
}

</script>

发现不同了吗？同志们！

• 父组件里没用vue2时候我们常用的v-bind，而用的v-model：name_a，而这个name_a是我们在子组件里自己随便起的名字！
• 我们修改props的方法变成在emit中声明一个“update：加上props中的名称”这种方式！

说完了，上号吧

上号.png