场景描述 在Vue的data中定义了一个对象，在将该对象传输给后端时需要做一些修改，因此新建了一个对象让他等于该对象，之后对新建的对象进行修改，此时会导致原有对象的属性也会改变。 **显示的页面** html template p 姓名：{{user.name}} /p p 年龄：{{user.age}} /p button @click="update" 复制对象，修改内容 /button /template **JS** javas

官网实现方法 Vue官网(组件 v-model | Vue.js (vuejs.org)(https://cn.vuejs.org/guide/components/v-model.html))提供了跨组件间使用v-model进行双向绑定的方法 html !--父组件-- CustomInput v-model:"inputText" / !--子组件-- script export default { props: 'modelValue', emits: 'update:mo

在由选项式API转向组合式API时，发现响应式数据的定义往往通过ref来实现，但是直接定义变量的方式也能够在页面中实现显示，而后又有readonly来进行变量定义的方式，因此实验了一下其中的区别。 自定义变量 使用自定义变量时直接进行定义即可let customVal:number = 10 1. 自定义变量的值可以直接在模板中显示（包括文本和输入框等） 2. 点击按钮改变自定义变量的值时，后台数据会发生变化，但页面不会刷新，即显示的还是原来的值 3. 通过输入框改变值时（v-model绑定