【父子组件传值】computed不生效

1. 初始化赋值

data() {
  return {
    form_1FormData: {
      // 关键:显式声明 rrapJobTypeArr 为数组(初始空数组,确保响应式)
      rrapJobTypeArr: [], 
    },
  };
},

2.可能是赋值时破坏了响应式(比如初始 rrapJobTypeArr 是 undefined,后续直接赋值)。此时用 this.$set 强制触发响应式更新

handleRrapJobTypeUpdate(newVal) {
  this.$set(this.form_1FormData, 'rrapJobTypeArr', newVal); 
}
### Vue 中动态组件与父子组件之间 #### 使用 `v-bind` 和 `$emit` 实现父到子以及子到父的通信 在 Vue 中,可以利用 `<component>` 元素配合 `is` 属性来定义动态组件。对于父子组件间的通讯,则可以通过 `props` 将数据从父级递给子级,并通过自定义事件 (`$emit`) 来让子组件向父组件发送消息。 ```html <!-- ParentComponent.vue --> <template> <div class="container"> <!-- 动态切换显示不同的子组件 --> <button @click="currentTab = 'compA'">Show Comp A</button> <button @click="currentTab = 'compB'">Show Comp B</button> <!-- 渲染当前选中的组件并递参数 --> <component :is="currentTab" :message="parentMsg"></component> <!-- 接收来自子组件的消息 --> <p>Received message from child: {{ receivedMessage }}</p> </div> </template> <script> import CompA from './components/CompA.vue'; import CompB from './components/CompB.vue'; export default { name: "ParentComponent", components: { CompA, CompB }, data() { return { currentTab: 'compA', parentMsg: 'Hello from Parent!', receivedMessage: '' } }, methods: { handleChildEvent(msg) { this.receivedMessage = msg; } } } </script> ``` 上述代码展示了如何在一个名为 `ParentComponent` 的父组件内使用两个按钮控制不同子组件(`CompA`, `CompB`)之间的切换[^2]。这里的关键在于: - **动态渲染**:通过设置 `:is=currentTab` 让 Vue 根据变量 `currentTab` 的决定要加载哪个组件。 - **属性绑定**:`:message=parentMsg` 表达式用于将父组件的数据作为 prop 发送给被激活的那个子组件实例。 为了完成完整的双向交互模式,还需要考虑子组件如何响应这些 props 并反馈信息回给父组件。下面是一个简单的子组件模板: ```html <!-- ChildComponent.vue (通用结构适用于 CompA 或者 CompB)--> <template> <div> <h3>{{ title }}</h3> <input type="text" v-model="localCopyOfProp"/> <br/> <span>(This value comes from the parent)</span> </div> </template> <script> export default { props: ['message'], computed: { localCopyOfProp: { get() { return this.message; }, set(newValue) { // 当输入框内容改变时触发更新事件通知父组件 this.$emit('update:message', newValue); } } }, mounted(){ console.log(this.message); } }; </script> ``` 这段脚本说明了当用户修改输入框内的文本时,会调用 `set()` 方法并通过 `$emit` 向外发出一个带有新的通知。这样就形成了闭环式的双向绑定机制[^1]。 此外,如果想要更进一步处理非直系关系下的跨层组件交流问题,比如祖孙三代甚至多代之间的沟通需求,那么 Vuex 或者提供 / 注入 API 可能是更好的解决方案[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风度酒南歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值