vue中的v-model指令和组件通信机制

现有2个组件

1. svgPreviewTest.vue 父组件
2. svgPreview.vue 子组件
   实现逻辑，父组件有一个按钮，点击父组件按钮时，向子组件传递一个值，并弹出一个窗口；

一. 在父组件 vsvgPreviewTest.vue 中,v-model=“showPreview” 是一个Vue的双向绑定语法糖
const showPreview = ref(false); // 用于控制预览弹窗的显示状态

<template><div class="preview-test-container"><vxe-button status="primary" @click="openPreview">打开弹窗</vxe-button><!-- SVG组件 --><svg-previewv-model="showPreview":initial-svg="currentSvg"title="预览示例"/></div>
</template><script setup>
import { ref } from 'vue';
import SvgPreview from './svgPreview.vue';// 控制预览弹窗的显示状态
const showPreview = ref(false);// 示例SVG字符串
const sampleSvg = `
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /><rect x="20" y="20" width="60" height="60" stroke="blue" stroke-width="2" fill="none" />
</svg>`;// 当前SVG内容
const currentSvg = ref(sampleSvg);// 打开预览弹窗的方法
const openPreview = () => {showPreview.value = true;
};</script>

二.在子组件svgPreview.vue中，

<template><vxe-modal v-model="visible" :title="title" width="1200" height="800" :mask="true" :loading="loading":resize="true" :show-zoom="false" :show-Footer="true"><div class="svg-editor-container"><textarea v-model="svgCode" placeholder="内容"></textarea></div></vxe-modal>
</template><script setup>
import { ref, computed, watch } from 'vue';
import message from '@/message';// Props
const props = defineProps({modelValue: {type: Boolean,default: false},title: {type: String,default: '预览'},initialSvg: {type: String,default: ''}
});// Emits
const emit = defineEmits(['update:modelValue']);const handleInput = () => {svgCode.value = formatSvgCode(svgCode.value);
};const clearCode = () => {svgCode.value = '';
};const closeModal = () => {visible.value = false;
};const visible = computed({get: () => props.modelValue,set: (value) => emit('update:modelValue', value)
});
const svgCode = ref(props.initialSvg);
const zoomLevel = ref(1);
const loading = ref(false);</script>

1. 定义以下Props,用于接收父组件传过来的值

// Props
const props = defineProps({modelValue: {type: Boolean,default: false},

2. 子组件中的实现

const visible = computed({get: () => props.modelValue,set: (value) => emit('update:modelValue', value)
});

这里的工作原理是：

• v-model 是一个语法糖，当你在父组件中写 **v-model=“showPreview” **时，Vue实际上会将其转换为：

   :modelValue="showPreview"@update:modelValue="showPreview = $event"

3. 在子组件中：

• 通过 defineProps 定义了一个 modelValue 属性来接收父组件的值
• 通过emit(‘update:modelValue’, value) 来向父组件发送更新事件

4. 子组件使用 computed 属性创建了一个 visible 计算属性：

• get 方法返回props中的 modelValue 值
• set 方法触发 update:modelValue 事件，通知父组件更新值
  所以当：
• 父组件改变 showPreview 的值时，子组件的 props.modelValue 会更新
• 子组件改变 visible 的值时，会触发 update:modelValue 事件，父组件的 showPreview 会相应更新
  这就是为什么 showPreview 的值能够在父子组件之间同步。这是Vue的一个重要特性，使得组件之间的数据交互变得简单和可维护。
  这种模式被称为"受控组件"模式，它确保了数据流的可预测性：数据总是从父组件流向子组件，而子组件通过事件通知父组件进行更新。这样的设计使得数据流向清晰，便于调试和维护。

---

三. 子组件 svgPreview.vue 定义的 defineProps 中，modelValue 一定是得叫这个名吗？
5. 默认情况下，v-model 会使用 modelValue 作为 prop 名称，但你可以通过在子组件中添加 defineOptions 来自定义这个名称。

• 使用默认的 modelValue： 方式

<!-- 父组件 -->
<child-component v-model="showPreview" /><!-- 子组件 -->
const props = defineProps({modelValue: Boolean  // 默认名称
})
const emit = defineEmits(['update:modelValue'])

6. 自定义方式

• 自定义 prop 名称：

<!-- 父组件 -->
<child-component v-model:visible="showPreview" /><!-- 子组件 -->
const props = defineProps({visible: Boolean  // 自定义名称
})
const emit = defineEmits(['update:visible'])

7. 就拿刚开始的例子说，如果要改自定义的方式

• 首先子组件更改

// Props
const props = defineProps({visible: {  // 改为visible而不是modelValuetype: Boolean,default: false},title: {type: String,default: 'SVG预览'},initialSvg: {type: String,default: ''}
});// Emits
const emit = defineEmits(['update:visible']);  // 改为update:visible// visible
const isVisible = computed({get: () => props.visible,set: (value) => emit('update:visible', value)
});

• 然后我们需要相应地修改父组件：

        <!-- SVG预览组件 --><svg-previewv-model:visible="showPreview":initial-svg="currentSvg"title="SVG预览示例"/>

这个例子展示了：
8. 在子组件中：

• 我们将 prop 名从 modelValue 改为 visible
• 将 emit 事件从** update:modelValue** 改为 update:visible
• 将计算属性从 visible 改为isVisible（因为visible现在是prop名）

9. 在父组件中：

• 我们将 v-model=“showPreview” 改为 v-model:visible=“showPreview”
• 这种语法明确指定了要绑定到哪个prop

关键点：

1. 如果使用默认的 v-model，prop名必须是 modelValue，emit事件必须是 update:modelValue
2. 如果要自定义名称，需要：

• 在父组件使用 v-model:propName 的语法
• 在子组件中使用相应的prop名称
• emit事件 名必须是 update:propName

10. 这种灵活性让你可以：

• 使用更有语义的 prop 名称
• 在同一个组件上使用多个 v-model 绑定
• 更清晰地表达组件的意图
  例如，你甚至可以在一个组件上使用多个 v-model：

<my-componentv-model:visible="isVisible"v-model:title="dialogTitle"v-model:content="dialogContent"
/>

每个 v-model 都会对应到组件中的一个 prop 和一个 update 事件。这使得组件的数据交互更加灵活和清晰。