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

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

zonemu3个月前 (07-13)技术文章35

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

相关文章

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...

K8s 的 Namespace 到底解决了什么问题?

在 Kubernetes 的世界里,资源调度、服务编排以及自动化运维构成了它强大的基础架构能力。但随着集群规模的扩大和团队协作复杂度的提升,仅靠原始的资源管理手段已经难以支撑多租户或大型项目的管理需求...

HTML5最新版本介绍(“html5”)

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新...

HTML5+眼球追踪?黑科技颠覆传统手机体验

今天,iH5工具推出一个新的神秘功能——眼动追踪,可以通过摄像头捕捉观众眼球活动!为了给大家具体演示该功能的使用,我做了一个案例,供大家参考。实际效果如下:案例比较简单,就是通过眼动功能获取视觉焦点位...

全屋定制板材怎么选不出错?6 种板材深度对比,3 套方案闭眼选

装修选板材头疼吧?刚装完的柜子变形发霉,说好的环保结果甲醛超标,这种翻车现场见太多了。厨房卫生间千万别用密度板,这玩意儿遇水就膨胀,半年准完蛋。颗粒板性价比确实高,但小厂出的真心不敢用。环保等级至少得...

ES6史上最全数JS数组方法合集-02-数组操作

数组生成 array.oflet res = Array.of(1, 2, 3) console.log(res) // [1, 2, 3]下标定位 indexOf用于查找数组中是否存在某个值,如果存...