当前位置:首页 > 技术分析 > 正文内容

vue父组件修改子组件的值(通过调用子组件的方法)

ruisui883个月前 (01-13)技术分析21

props只支持第一次加载这个组件的时候获取父组件的值,后续修改父组件的值得时候子组件并不会动态的更改。

然而我们想要通过父组件修改子组件的值要怎么做呢?

可以通过ref的方式调用子组件的方法改变子组件的值。

子组件

<template>

<div>

<span>{{data}}</span>

</div>

</template>

<script>

export default {

data() {

return {

data:'就要被修改啦'

};

},

methods: {

a(val) {

this.data=val;

},

},

};

</script>


父组件

<template>

<div>

<child ref='child'></child>

</div>

</template>

<script>

export default {

mounted(){

setTimeout(()=>{

this.$refs.child.a("把你修改了");

},3000)

}

components:{

child:()=>import("../components/child.vue")

}

};

</script>


好啦问题就解决啦

————————————————

版权声明:本文为CSDN博主「冲啊使劲冲」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_49279305/article/details/120902373

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/250.html

标签: vue 小程序
分享给朋友:

“vue父组件修改子组件的值(通过调用子组件的方法)” 的相关文章

企业如何高效进行费控管理?

作为一个职场人,无论是普通员工、财务人员还是企业管理人,都无法避开报销,而报销,就涉及到了企业成本费用控制,即费控。其控制的内容包括材料消耗成本控制、工资成本控制、费用成本控制。但在实际工作中,员工不知道如何规范化提交报销申请,报销容易频频被打回,导致报销周期长;财务人员也面临着报表滞后、账实不符、...

一套智能停车场收费管理系统设计方案,拓扑图VISIO格式

大家好,我是薛哥。最近VIP会员群的读者咨询停车场管理系统的规划设计方案,今天分享一个模板素材,主要里面的拓扑图可以编辑的,VISIO格式,建议收藏备用。此套完整的Word方案,VIP会员下载!智能停车场收费管理子系统1、系统概述本次停车场管理系统设计纯车牌识别系统,并可在合适的位置设置中央收费点,...

总结了Vue3的七种组件通信方式,别再说不会组件通信了

写在前面本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式:propsemitv-modelrefsprovide/injecteventBusv...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

全新斯柯达柯珞克Karoq深度评测:大众替代品

“斯柯达柯珞克是一款出色的全能家庭 SUV,具有许多有用的功能”价格36,605 英镑- 49,190 英镑优点方便的 VarioFlex 后排座椅非常适合家庭入住驾驶乐趣缺点保修期短保守的内饰性格比Yeti少结论——斯柯达柯珞克是一辆好车吗?斯柯达柯珞克是在辉煌的七座 斯柯达柯迪亚克之后推出的,因...