Fanruan父子格设置

本文介绍了在FineReport设计报表时,选中单元格后显示的蓝色箭头表示单元格的父格关联,以及帆软学院如何通过文档详细解释父子格逻辑,旨在培养企业急需的数据分析人才。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  edu.fanruan.com/video/play/921


FineReport 设计报表时,选中单元格后,单元格的父格会有「蓝色箭头」。如下图所示

#NAME?数据集06_事业部vds龙虎榜.S(division)得分数据集06_事业部vds龙虎榜.G(score)达成率数据集06_事业部vds龙虎榜.G(comp_rate)
help.fanruan.com/finereport/doc-view-141.html?source=4#
### Vue 父子组件共享变量的实现方式 在 Vue 中,父子组件之间可以通过多种方式进行数据共享。以下是几种常见的实现方式: #### 1. 使用 `v-model` 或 `.sync` 进行双向绑定 通过 `v-model` 或者 `.sync` 修饰符可以在父组件和子组件之间建立一种同步的关系。这种方式允许子组件直接修改父组件中的值。 ```html <template> <MyComponent v-model:title="bookTitle" /> {{ bookTitle }} </template> <script setup> import MyComponent from './MyComponent.vue' import { ref } from 'vue' const bookTitle = ref('') </script> ``` 在这个例子中,`v-model:title` 是语法糖,实际上会转化为 `title` 属性和 `update:title` 事件监听器[^1]。当子组件触发 `update:title` 事件时,父组件中的 `bookTitle` 值会被更新。 对于 `.sync` 修饰符,在 Vue 2.3.0+ 版本中也可以使用类似的逻辑[^2]。 --- #### 2. 使用 Props 和 Events 手动管理状态 这是最基础的方式之一,适用于简单的父子组件通信场景。父组件通过 `props` 将数据传递到子组件,而子组件通过 `$emit` 方法通知父组件更改其内部的状态。 **父组件:** ```html <template> <ChildComponent :message="parentMessage" @update-message="handleUpdateMessage" /> </template> <script> export default { data() { return { parentMessage: 'Hello from Parent!' } }, methods: { handleUpdateMessage(newMessage) { this.parentMessage = newMessage; } } } </script> ``` **子组件:** ```html <template> <div>{{ message }}</div> <button @click="sendMessageToParent">Update Message</button> </template> <script> export default { props: ['message'], methods: { sendMessageToParent() { this.$emit('update-message', 'Updated by Child!'); } } } </script> ``` 这种模式遵循单向数据流的理念,推荐用于简单场景下的父子组件交互[^3]。 --- #### 3. 利用 Vuex 或 Pinia 实现全局状态管理 如果应用规模较大或者需要多个组件共享同一个状态,则可以考虑使用 Vuex(Vue 2)或 Pinia(Vue 3)。这些工具提供了集中式的状态管理模式,使得任何地方都可以访问并修改特定的状态。 **Vuex 示例:** 安装 Vuex 并配置 store 后,可以在任意组件中调用 mutations 或 actions 修改 state 数据。 ```javascript // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { sharedVariable: '' }, mutations: { updateSharedVariable(state, newValue) { state.sharedVariable = newValue; } } }); ``` **父组件:** ```html <template> <input v-model="sharedValue"> </template> <script> export default { computed: { sharedValue: { get() { return this.$store.state.sharedVariable; }, set(value) { this.$store.commit('updateSharedVariable', value); } } } }; </script> ``` **子组件:** ```html <template> <span>Current Value: {{ sharedValue }}</span> </template> <script> export default { computed: { sharedValue() { return this.$store.state.sharedVariable; } } }; </script> ``` 这种方法适合复杂的项目结构,能够有效减少 prop drilling 的问题[^4]。 --- #### 4. 使用 Provide/Inject API Provide/Inject 提供了一种更灵活的方式来让祖先组件向下层嵌套的所有后代组件注入依赖项。虽然这并不是严意义上的“父子组件”通信手段,但在某些情况下非常有用。 **祖辈组件:** ```javascript provide() { return { themeColor: 'blue', changeTheme: (newColor) => { this.themeColor = newColor; } }; }, ``` **子孙组件:** ```javascript inject: ['themeColor', 'changeTheme'], methods: { toggleTheme() { this.changeTheme(this.themeColor === 'blue' ? 'red' : 'blue'); } } ``` 此方案特别适配于跨多级层次的情况,比如主题颜色切换等功能需求[^4]。 --- #### 总结 每种方法都有各自的适用范围: - **Props + Events**: 推荐用于小型、局部化的父子组件通信; - **`.sync` / `v-model`**: 方便快捷地完成双向绑定操作; - **Vuex/Pinia**: 更加复杂的应用程序应采用统一的状态管理系统; - **Provide/Inject**: 跨越多代次的上下文传播场合下尤为高效。 具体选择取决于实际业务需求以及项目的整体架构设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值