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

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

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

相关文章

垃圾收费管理系统(垃圾收运管理系统)

今天来了解《#垃圾收费管理系统》,它包括如下功能:收费单位表格界面,类别表格界面,类别设置信息窗口,单位信息表格界面,单位信息信息窗口,缴费登记信息窗口,缴费登记表格界面,缴费登记的缴费单.1,到期提...

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中...

2024前端面试真题之—VUE篇(前端面试题vuex)

添加图片注释,不超过 140 字(可选)1.vue的生命周期有哪些及每个生命周期做了什么? beforeCreate是new Vue()之后触发的第一个钩子,在当前阶段data、methods、com...

vue3源码分析——实现组件通信provide,inject

引言<<往期回顾>>vue3源码分析——rollup打包monorepovue3源码分析——实现组件的挂载流程vue3源码分析——实现props,emit,事件处理等vue3源...

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...

Python 实现 | 通过 Gitlab API 获取项目工程、分支、commit 提交记录

前提在 gitlab 中你的工程创建 Access Token然后你会得到一个 21 位 access token,代码中需要用到。代码''' 说明: 1.登录gitlab的r...