项目中出现多层组件嵌套且需要使用同一参数，可以最上层v-model绑定ref变量，其他层都绑定计算属性，并且计算属性实现getter和setter(当然也可以不用计算属性，依然绑定ref变量，然后通过事件进行变化值传递)
显式
:绑定属性，@绑定事件，事件中修改属性
隐式
v-model
第一种无需多说，第二种简单示例，以Dialog组件示例直接使用
Dialog.vue
<template>
<el-button @click="handleClick">切换</el-button>
<el-dialog v-model="visible"></el-dialog>
</template>
<script setup lang="ts">
const visible=ref(false)
const handleClick=()=>{
visible.value=!visible.value;
</script>
<style scoped></style>
一层封装
Dialog.vue
<template>
<el-dialog v-model="visible"></el-dialog>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: {
type: Boolean,
default: false,
const visible = computed({
get: () => props.modelValue,
set: val => {
emit("update:modelValue", val);
const emit = defineEmits(["update:modelValue"]);
</script>
<style scoped></style>
BaseDialog.vue
<template>
<el-button @click="handleClick">切换</el-button>
<Dialog v-model="visible"></Dialog>
</template>
<script setup lang="ts">
import Dialog from './Dialog.vue'
const visible=ref(false)
const handleClick=()=>{
visible.value=!visible.value;
</script>
<style scoped></style>
两层封装
Dialog.vue
<template>
<el-dialog v-model="visible"></el-dialog>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: {
type: Boolean,
default: false,
const visible = computed({
get: () => props.modelValue,
set: val => {
emit("update:modelValue", val);
const emit = defineEmits(["update:modelValue"]);
</script>
<style scoped></style>
BaseDialog.vue
<template>
<Dialog v-model="visible"></Dialog>
</template>
<script setup lang="ts">
import Dialog from './Dialog.vue'
const props = defineProps({
modelValue: {
type: Boolean,
default: false,
const visible = computed({
get: () => props.modelValue,
set: val => {
emit("update:modelValue", val);
const emit = defineEmits(["update:modelValue"]);
</script>
<style scoped></style>
CustomDialog.vue
<template>
<el-button @click="handleClick">切换</el-button>
<BaseDialog v-model="visible"></BaseDialog>
</template>
<script setup lang="ts">
import BaseDialog from './BaseDialog.vue'
const visible=ref(false)
const handleClick=()=>{
visible.value=!visible.value;
</script>
<style scoped></style>
弄明白什么是双向数据绑定，双向数据绑定是指数据的变化能够自动反映在用户界面上，同时用户界面中的输入也能够自动更新数据。在传统的 Web 开发中，通常需要手动监听用户输入的变化并更新数据，或者手动更新数据后再重新渲染用户界面。而在 Vue 中，通过双向数据绑定，我们只需要关注数据的变化，Vue 会自动处理数据与用户界面之间的同步。
father组件向自定义kzinput组件传递响应式数据username，同时father组件给子组件绑定事件，子组件声明绑定的事件，同时子组件在调用时，将修改后的username传回父组件，呈现在页面上，实现双向绑定；
Vue 有一些内置的修饰符，比如 .trim、.lazy 和 .number。在某些场景下，我们可以使用自定义修饰符。我们在组件上的 v-model中使用修饰符时，父组件会向子组件传递 一个props：，这个属性名也是固定的，这个属性是一个对象，我们可以在这个对象中访问到这个修饰符。这个props默认是一个空对象。比如下面的栗子中，modelModifiers的值是 {capitalize: true}，我们可以通过判断这个修饰符对应的属性值，对modelValue进行一些操作。})
比如我们有自定义的Form组件、Input组件。如果Form组件想拿到Input组件中input框输入的内容，我们可以让Form这个父组件给Input子组件传值（不能直接修改子组件的props），子组件定义变量记录prop的值，子组件监听数据变化，再用传给父组件，父组件接收调用方法去修改value。vue3可以使用组件v-model去解决上述问题，从而实现组件的双向数据绑定。组件v-model其实是语法糖。
此外，Vue 3 中的 v-model 还可以自定义修饰符。修饰符是一种特殊标记，可以在 v-model 绑定上使用，以更改其行为。例如，你可以使用 .lazy 修饰符来实现延迟更新，从而仅在用户完成输入后才更新绑定的值。另一个变化是，在 Vue 3 中，v-model 生成的属性和事件名称可以通过 setup() 函数中的 `v-model` 选项进行自定义。这意味着你可以使用不同的名称来指定生成的属性和事件，以适应不同的使用场景。
之前的版本可以直接绑定，但是现在需要换:modelValue="modelValue"，如果直接用v-model="modelValue“会报错 v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead。
再父组件中通过使用:msg='msg'绑定需要传给子组件的属性值，然后再在子组件中用props接收该属性值。在子组件的点击事件中 通过触发父组件中的自定义事件，把想传给父组件的信息以参数形式带过去 父组件便可拿到子组件传过来的值。插槽的基础用法非常简单，只需在 子组件 中使用 标签，就会将父组件传进来的 HTML 内容渲染出来。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。
