vue3.0 approfondit le modèle en V et utilise plusieurs modèles en V

vue3.0 approfondit le modèle en V et utilise plusieurs modèles en V

principe du modèle en V

• Principe : En fait, il s'agit d'un sucre syntaxique composé d'accessoires et d'émetteurs
• Modifications des valeurs par défaut
  • prop：value -> modelValue；
  • 事件：input -> update:modelValue；
• Remarque : Le modificateur .sync de v-bind et l'option de modèle du composant ont été supprimés (car pour implémenter la mise à jour de la valeur update:modelValue, l'écriture .sync précédente est temporairement utilisée)
• Remarque 2 : Ajout de la prise en charge de plusieurs modèles en V
• Remarque 3 : Ajout de la prise en charge des modificateurs personnalisés

Le mode V implémente la communication entre les composants parents et enfants

Composant parent Main.vue

<template>
  <div>
    <div>Main - flag - {
    
    {
    
     flag }}</div>
    <button @click="flag = !flag">修改 flag</button>
    <Dialog v-model="flag" />
  </div>
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue'
let flag = ref<Boolean>(true)
import Dialog from './childCom/Dialog.vue'
</script>
<script lang="ts">
export default {
    
    
  name: 'Main',
}
</script>

Composant enfant Dialog.vue

<template>
  <div v-if="modelValue" class="dialog">
    <div class="dialog-header">
      <span>标题</span>
      <button @click="close">关闭</button>
    </div>
    <div class="dialog-main">
      {
    
    {
    
     modelValue }}
    </div>
  </div>
</template>
<script setup lang="ts">
type Props = {
    
    
  modelValue: Boolean
}
defineProps<Props>()

const emit = defineEmits(['update:modelValue'])
const close = () => {
    
    
  emit('update:modelValue', false)
}
</script>
<script lang="ts">
export default {
    
    
  name: 'Dialog',
}
</script>
<style lang="scss" scoped>
.dialog {
    
    
  width: 400px;
  height: 250px;
  border: 1px solid #ccc;
  &-header {
    
    
    height: 40px;
    border: 1px solid #ccc;
  }
  &-body {
    
    
    height: 210px;
  }
}
</style>

• Effet
  • Dans le composant parent, lorsque vous cliquez pour modifier le drapeau, vous pouvez contrôler l'affichage et le masquage du composant de dialogue
  • Lorsque vous cliquez sur fermer dans la boîte de dialogue du sous-composant, vous pouvez modifier la valeur du drapeau du composant parent

v-model utilise plusieurs

main.vue

<template>
  <div>
    <div>Main - 标志 - {
    
    {
    
     flag }} 标题 - {
    
    {
    
     title }}</div>
    <button @click="flag = !flag">修改 flag</button>
    <Dialog v-model="flag" v-model:title="title" />
  </div>
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue'
let flag = ref<Boolean>(true)
import Dialog from './childCom/Dialog.vue'
let title = ref<String>('我是小渣亮')
</script>
<script lang="ts">
export default {
    
    
  name: 'Main',
}
</script>
<style lang="scss" scoped></style>

dialog.vue

<template>
  <div v-if="modelValue" class="dialog">
    <div class="dialog-header">
      <span>标题 - {
    
    {
    
     title }}</span>
      <button @click="close">关闭</button>
    </div>
    <div class="dialog-main">
      <button @click="changTitle">修改 标题</button>
      {
    
    {
    
     modelValue }}
    </div>
  </div>
</template>
<script setup lang="ts">
type Props = {
    
    
  modelValue: Boolean
  title: String
}
defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])
const close = () => {
    
    
  emit('update:modelValue', false)
}
const changTitle = () => {
    
    
  emit('update:title', '我就是狗啊')
}
</script>
<script lang="ts">
export default {
    
    
  name: 'Dialog',
}
</script>
<style lang="scss" scoped>
.dialog {
    
    
  width: 400px;
  height: 250px;
  border: 1px solid #ccc;
  &-header {
    
    
    height: 40px;
    border: 1px solid #ccc;
  }
  &-body {
    
    
    height: 210px;
  }
}
</style>

• Effet
  

modificateur personnalisé v-model

• Modificateurs personnalisés pour v-model
• Vous pouvez également ajouter des modificateurs personnalisés à un autre v-model:title

Modificateurs personnalisés pour v-model

main.vue

<template>
  <div>
    <div>Main - 标志 - {
    
    {
    
     flag }} 标题 - {
    
    {
    
     title }}</div>
    <button @click="flag = !flag">修改 flag</button>
    <!-- 添加xzl -->
    <!-- <Dialog v-model.xzl="flag" v-model:title="title" /> 修饰符 -->
    <!-- 没有添加 xzl修饰符 -->
    <Dialog v-model="flag" v-model:title="title" />
    <B />
    <C />
  </div>
</template>

<script setup lang="ts">
import {
    
     ref } from 'vue'
let flag = ref<Boolean>(true)
import Dialog from './childCom/Dialog.vue'
import B from './childCom/B.vue'
import C from './childCom/C.vue'
let title = ref<String>('我是小渣亮')
</script>
<script lang="ts">
export default {
    
    
  name: 'Main',
}
</script>
<style lang="scss" scoped></style>

dialog.vue

<template>
  <div v-if="modelValue" class="dialog">
    <div class="dialog-header">
      <span>标题 - {
    
    {
    
     title }}</span>
      <button @click="close">关闭</button>
    </div>
    <div class="dialog-main">
      <button @click="changTitle">修改 标题</button>
      {
    
    {
    
     modelValue }}
    </div>
  </div>
</template>
<script setup lang="ts">
type Props = {
    
    
  modelValue: Boolean
  title: String
  modelModifiers?: {
    
    
    // default: () => {}
    xzl: Boolean
  }
}
const propsData = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])
const close = () => {
    
    
  emit('update:modelValue', false)
}
const changTitle = () => {
    
    
  if (propsData.modelModifiers?.xzl) {
    
    
    emit('update:title', '我就是狗之zxl')
  } else {
    
    
    emit('update:title', '我就是狗之非xzl')
  }
}
</script>
<script lang="ts">
export default {
    
    
  name: 'Dialog',
}
</script>
<style lang="scss" scoped>
.dialog {
    
    
  width: 400px;
  height: 250px;
  border: 1px solid #ccc;
  &-header {
    
    
    height: 40px;
    border: 1px solid #ccc;
  }
  &-body {
    
    
    height: 210px;
  }
}
</style>

• Effet