vue3 里面父组件向子组件传值的一个问题
在 vue2 里面:
// 父组件
// 然后在子组件 ComponentA 里面直接去拿 a 和 b 就好了,就相当于是 v-bind 把 obj 拆开了,添加了.sync 修饰符又能同步修改
props: ['a', 'b']
如果按照 vue3 的写法:
// 父组件
// 子组件
现在遇到了两问题,求大佬们解答一下:
1.如何在 vue3 里面把 obj 拆开,并且实现类似于.sync 的效果
2.为什么 v-model:xxx="xxx",当 xxx 为 reactive 定义的时候不能同步修改,而 ref 可以
没人答么,我来稍微回复一下。
- 不答,不想答
- 其实与 vue2 也差球不多,文档中也有,可能你没注意到。
obj: {
id: 1,
title: 'My Journey with Vue'
}
<component v-bind="post"></component>
// 等价于:
<component v-bind:id="post.id" v-bind:title="post.title"></component>
参考文档: v3.vuejs.org/guide/component-props.html#passing-the-properties-of-an-object
第一个没试过就不说了。
第二个很好解释 reactive 定义的响应市对象本身的,如果要对象里面的值需要响应的话需要用到 toRefs 方法转化
多谢大佬解答,我知道 v-bind 可以用,但是我是想在 v-bind 上在实现原 vue2 中.sync 的作用。
其实我发现需要实现 1 主要问题在 2,之前一直以为 ref 是针对 string 或 number 这种基本的数据类型的,不能用于 object,结果一直弄错了,ref 会根据数据类型去判断,如果是 object 就会走 reactive 创建这个响应式对象,那么我如果要实现 v-bind.sync 的话其实有两种办法。
第一种:父组件里面直接用 ref 定义,我的想的是因为在模板上 obj.value 是被解绑的所以直接写 obj 就行了,然后 v-model 的语法糖其实就是更新 obj 的 value,所以直接用 ref 定义可以
// 父组件
<template>
<ComponentA v-model:obj="obj" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const obj = ref({
a: 1,
b: 2
});
</script>
第二种:这个就其实是自己手动拆开了,就是在子组件里面麻烦一点需要定义很多个 update:xxx
// 父组件
<template>
<ComponentA v-model:a="obj.a" v-model:b="obj.b" />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const obj = reactive ({
a: 1,
b: 2
});
</script>
不知道我上面说的对不对
ps:目前用的是第一种,就是在如果需要在方法里面用的时候是写成 obj.value.a,看起来怪怪的...
我好像有点懂了,其实就是相当于我上面第二种方法里面 toRefs 把 obj 转化一下一样的道理,v-model 更新的对象的值,就是需要一个 xx.value?
// 父组件
<template>
<ComponentA v-model:a="a" v-model:b="b" />
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const obj = reactive({
a: 1,
b: 2
});
const { a, b } = toRefs(obj);
</script>
客户库存有一万多, 要将这一万多库存按客户要求分散到几百个工位上, 需要针对库存的多个属性进行多次查询, 循环里套循环, 能查上千次甚至更多. 这种情况下, 我是直接数据库查,…
35-65K 找一个 PHP ,有吗? 上了 20K 基本就和一门语言没啥关系了。 OP 不会在想为什么贵司有个所谓的 PHPer 能拿 30K+吧? 我见过 40K …
不打游戏 主要用来工作,编程和视频编辑, 显示视野大效果好,至少 2k 吧 要带着到处跑,轻薄续航长,跑个程序不卡壳,轻量的视频编辑能跑 有 32g 的吗 6000 以内有推荐…