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