Vue 父子组件在同一页面，父组件传值给子组件无效，原因：子组件先初始化

最新推荐文章于 2024-05-02 17:10:35 发布

webYin

最新推荐文章于 2024-05-02 17:10:35 发布

阅读量2.4k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/MYuanFang/article/details/105551935

版权

使用ref给子组件赋值，然后在子组件在监听值的变化，这样可以父子组件可以同时更新


// 父组件
<template>
  <children ref="child"></children>
</template>
 
<script>
import children from ".../children"
 
export default {
   methods: {
        changeChild() {
            //改变子组件的值
            this.$refs.child.childData = true;    // 这句很重要
        }
   },
  mounted() {
    this.changeChild()
  }
}
// 子组件children.vue
export default {
 data(){
    return{
        childData:false
    }
 }
 watch: {
    //监听值是否改变
    childData(val) {
            console.log(val);
    },

  },
}