<template> <div ref="root" class="homse"> <!-- {{ refTreeData }} --> <recursiveCom :tree-data="refTreeData"></recursiveCom> </div></template><script setup lang="ts">import type { nodeType } from './type'import { ref, reactive } from 'vue'// 测试 tree 型组件import recursiveCom from './recursiveCom.vue'let treeDataTest = [ { title: '节点名称', id: '1', status: '未开始', start_time: '2023.08.10', end_time: '2023.08.16', falg: true, show: true, children: [ { title: '子节点名称', id: '1 - 1', status: '进行中', start_time: '2023.08.10', end_time: '2023.08.16', show: true, children: [ { title: '子节点名称', id: '1 - 1 - 1', status: '进行中', start_time: '2023.08.10', end_time: '2023.08.16' }, { title: '二子节点名称', id: '1 - 2 - 2', status: '已完成', start_time: '2023.08.10', end_time: '2023.08.16' } ] }, { title: '二子节点名称', id: '1 - 2', status: '已完成', start_time: '2023.08.10', end_time: '2023.08.16' } ] }, { title: '节点名称', id: '2', status: '未开始', start_time: '2023.08.10', end_time: '2023.08.16', falg: true, show: true, children: [ { title: '子节点名称', id: '2 - 1', status: '进行中', start_time: '2023.08.10', end_time: '2023.08.16' }, { title: '二子节点名称', id: '2 - 2', status: '已完成', start_time: '2023.08.10', end_time: '2023.08.16' } ] }]let refTreeData = ref<nodeType[]>(treeDataTest)</script><style scoped></style>
子组件
<template> <div style="border: 1px solid #ccc; margin: 10px"> <div v-for="node in treeData" :key="node.id"> <span v-if="node.children" class="icon" :class="node.show ? 'packup' : 'openup'" @click="expansion(node)" ></span > <div class="continer">{{ node.id }}{{ node.title }} {{ node.status }}</div> {{ node.show }} <template v-if="node.show"> <recursive-node v-if="node.children" :tree-data="node.children" /> </template> </div> </div></template><script setup lang="ts">import type { nodeType } from './type'import recursiveNode from './recursiveCom.vue'defineProps<{ treeData: nodeType[]}>()let expansion = (node: nodeType) => { node.show = !node.show}</script><style scoped lang="less">.packup { transform: rotate(180deg);}.openup { transform: rotate(90deg);}.icon { display: inline-block; cursor: pointer;}.continer { display: inline-block;}</style>
在expansion函数中可以直接修改父组件的值,vue也不会报警告,这是被允许的吗?为什么可以正常修改
https://cn.vuejs.org/guide/components/props.html#one-way-data...
当对象或数组作为 props 被传入时,虽然子组件无法更改 props 绑定,但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递,而对 Vue 来说,禁止这样的改动,虽然可能生效,但有很大的性能损耗,比较得不偿失。
问题描述 编写树形结构组件碰到的问题。父组件传递的数据是没有控制样式的这些属性的。子组件在接受数据后增加了一些控制样式的属性。但是在修改这些增加的属性时控制台报错。 相关代码 父组件 子组件 控制台报错 问题出现的环境背景及自己尝试过哪些方法 这个属性可以在控制台打印出来,但是修改的时候却又找不到了。
vue3中子组件向父组件传值 在传值的时候为什么只能在声明一个方法的时候传递,而不能在定义click的时候传递呢
Vue3 子组件中利用父组件传递过来的值,这么写对吗? 这里options是父组件传递过来的,子组件中使用了options中的属性,这里直接在setup中返回是可以动态绑定的吗,还是要通过computed或reactive包一下再返回?
父组件动态传递ref给子组件应该怎么写? 父组件调用 子组件 这里我想把父组件传递的ccc动态给子组件,然后操作子组件?
我是新来的,对一些事情有点困惑。我在网上读了许多文章,声称组件不能改变自己的道具,但是父组件可以改变其子组件的道具。然而,我没有看到任何真正展示如何做到这一点的东西。 我希望能够做到这一点: 然而,我根本不知道如何做到这一点——尽管我在React上读到的几乎所有材料都说父母可以改变孩子的道具。我能正常工作的如下: 当我只想重新渲染子视图时,父视图需要重新渲染,这对我来说似乎有点过分了。如何更改<代
有一个父组件 A,上面有两个子组件,B 和 C。 在子组件 B 上有一个子组件 D,其中 D 里面有一个 textarea 在子组件 C 上有一个按钮,点击这个按钮获取 D 里面 textarea 的值。 我尝试的两个方案 方案一:可以通过直接操作 dom 来解决 方案二:通过 D 将 textarea 的值传递给 B,然后由 B 传给 A,再有 A 传给 C,但总是传不成功。 请问我的这个需求,