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