v-model深度使用，双向数据流

<template>

<button @click="flag = !flag">改变model值</button>

<div>{{ flag }}</div>

<div>{{ text }}</div>

// 可以定义多个v-model,语法是v-model:自定义变量

// 可以自定义修饰符

<VModel v-model="flag" v-model:text.isBtn="text"></VModel>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

import VModel from '../study/v-model/component.vue'

let flag = ref(true)

let text = ref('传过去的文本')

// v-model值在子组件中通过emit修改值，不需要父组件进行接收

</script>

<style scoped lang='scss'>

</style>

 

<template>

<div>{{ modelValue }}</div>

<div>{{  text }}</div>

<button @click="change">子组件改变父组件传过来的v-model值</button>

<input @input="inputChange" :value="text">

</template>

<script setup lang='ts'>

// vue2 默认使用value接收；vue3 默认使用modelValue接收

const props = defineProps<{

  modelValue: boolean, // 默认变量名

  text: string, // 传多个v-model的使用自定义的变量名接收

  textModifiers?: { // 接收修饰符传过来的参数，固定句式 v-model自定义名+Modifiers, ?代表可传可不传

    isBtn: boolean // ，只能是布尔值且一定是true

  }

}>()

// update:modelValue是固定句式，update:传过来定义的props变量名

const emit = defineEmits(['update:modelValue', 'update:text'])

// v-model中子组件可以直接修改父组件传过来的值，通常props中为了数据一致性不可以修改父组件传过来的值

const change = () => {

  emit('update:modelValue', false)

}

// 修改多个传入的v-model值

const inputChange = (e:Event) => {

  // const target = e.target  // 默认e.target是EventTarget对象，无法通过e.target获取值

  const target = e.target as HTMLInputElement

  // 可以接收修饰符变量来做对应的逻辑

  emit('update:text', props?.textModifiers?.isBtn ? '有修饰符' + target.value : target.value)

}

</script>

<style scoped lang='scss'>

</style>