vue3 中 v-model从入门到精通

父组件

<template>
  <div class="box">
    <h1>组件间通信4: v-model</h1>

    <h2>1. 用在原生标签上</h2>
    <!-- 
      原生标签上的本质: 动态value属性 + 原生input监听(将输入的最新值保存到属性上)
    -->
    <input type="text" v-model="msg1">
    <span>{{ msg1 }}</span><br>

    <br>
    <br>
    <hr>

    <h2>2. 用在组件标签上</h2>
    <h2>需求: 自定义带左侧标题的输入框</h2>
    <!-- 
      组件标签上的本质: 动态value属性 + 自定义input监听(将子组件分发数据保存父组件的属性上)
    -->
    msg3:{{msg3}}
    <CustomInput v-model:msg3="msg3"/>
    <custom-input v-model:msg3="msg3"/>
    <!-- <custom-input :msg3.sync="msg3"/> -->
    <!-- <custom-input :modelValue="msg3" @update:modelValue="(data)=>{msg3=data}"/> -->
  </div>
</template>

<script lang="ts">
export default {
  name: 'ModelTest',
  components: {
    CustomInput
  }
}
</script>

<script setup lang="ts">
import { ref } from 'vue';
import CustomInput from './CustomInput.vue'
const msg1 = ref('abc')
const msg2 = ref('atguigu')
const msg3 = ref('haha')
const msg4 = ref('hehe')
</script>

子组件

<template>
  <div class="box">
    <span style="margin-right: 10px">标题: </span>
    <input type="text" :value="msg3">
    <button @click="changeMsg3">修改父组件的msg3</button>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'CustomInput',
  }
</script>

<script setup lang="ts">
// defineProps(["modelValue"])
defineProps(["msg3"])
// 与Vue2的v-model的区别
// 1.默认属性名是modelValue,不再是value了

// Vue3中,v-model和.sync语法合二为一
// 指令语法用的是v-model
// 实际效果用的是.sync
// 扩展语法:v-model:属性名="value",该语法可以自定义传递的标签属性名称,不一定非要是modelValue
//  但是,自定义属性名称之后,自定义事件的名称也会跟着发生变化

// const emits = defineEmits(["update:modelValue"])
const emits = defineEmits(["update:msg3"])

const changeMsg3 = ()=>{
  // emits('update:modelValue',"xixi")
  emits('update:msg3',"xixi")
}
</script>