vue父组件修改子组件的值（通过调用子组件的方法）

vue父组件修改子组件的值（通过调用子组件的方法）props只支持第一次加载这个组件的时候获取父组件的值，后续修改父组件的值得时候子组件并不会动态的更改。然而我们想要通过父组件修改子组件的值要怎么做呢？可以通过ref的方式调用子组件的方法改变子组件的值。子组件<template><div><span>{{data}}</span></div&g

冲啊使劲冲

6991人浏览 · 2021-10-22 11:37:37

冲啊使劲冲 · 2021-10-22 11:37:37 发布

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>