在 Flexbox 布局中，flex: 1 和 overflow: hidden 是两个常用的属性，它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用：当子元素设置 flex: 1 时，它会根据 Flex 容器的主轴方向，自动伸缩以填充剩余的可用

Read more

在Vue 3中，当你需要对v-model传入的值进行处理后再展示或使用时，可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性，在getter中处理展示值，在setter中处

Read more

在 Vue.js 中，父子组件通信是构建复杂应用的关键。两种常见的通信方式是： 父组件通过 props 向子组件传递函数。 子组件通过 $emit 触发父组件中定义的事件。这两种方式都能实现父子组件之间的交互，但它们在机制、适用

Read more

在 Vue 3 中，v-model 是用于在父组件和子组件之间进行双向数据绑定的机制。当你在子组件中定义了一个 defineModel，但在父组件中没有传递 v-model，会导致以下问题： 数据未绑定：defineModel 创建的 val 变量在子组件中是局

Read more

在传递的为基本数据类型的时候,在父组件没有传递值的时候会出现第一次加载无法同步. 当然子组件后续更新还会同步.// 子组件：<script lang="ts" setup>const val = defineModel<number>({default:10});function test()

Read more

Read more

具体的原因，是v-model是个语法糖.. <!-- Child.vue --><script setup>const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])</script><template> <input :value="modelVal

Read more

<div style="height: 100px;position: relative;background-color: #f0ad4e"> <div style="height: 100%;background-color: orange"></div> <div style="height: 100%;background-color: red"></div><

Read more

小程序开发注意 各家小程序实现机制不同，可能存在的平台兼容问题 浏览器内核差异各家小程序的浏览器内核不同，可能会造成css兼容性问题，更多细节参考：https://ask.dcloud.net.cn/article/1318 自定义组件渲染差异微信（可以

Read more

watch 当你需要对一个或多个响应式引用或计算属性进行监听，并且需要在它们变化时执行异步或开销较大的操作时，应该使用 watch。 watch 允许你访问旧值和新值，因此你可以根据旧值和新值之间的差异来决定是否执行某些操作

Read more