vue父子组件通信之父组件异步传值(watch)

最新推荐文章于 2024-06-23 11:24:12 发布

原创最新推荐文章于 2024-06-23 11:24:12 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了在Vue.js中，当需要从父组件异步传递数据给子组件时，常规的props方法无法实时更新的情况。作者提出了使用watch监听props属性变化，当父组件数据通过axios更新后，子组件能捕获并响应新值，实现了动态数据的同步。

组件通信基础版

以下只是基本的父子组件通信，当我要异步传值时比如需要将父组件axios发送的数据传给子组件。显然这种基本的方式是不可行的，获取的数据将一直是[1,2,3],即使你在父组件中通过axios修改了值那么子组件接收到的值也是[1,2,3]。

//父组件
<template>
  <div>
    <TimeLine :determine="determine"@updateAriplane="timeLineUpdate" />
  </div>
</template>

<script>
import TimeLine from '@/components/TimeLine'
  export default {
  components: {
    TimeLine,
  },

  data() {
    return {
      determine:[1,2,3]
    }
  },
  }
</script>

//子组件
<script>
export default {
  props: {
    determine: {
      type: Array,
      require: true
    }
  },
  methods: {
    test () {
     console.log(this.determine)//此时打印的就是[1,2,3]
    }
  },
}
</script>

这种情况我搜到的网上基本好多都是通过v-if或者v-show来判断一个值，根据值来再次重新渲染dom。

我解决的方法是在子组件添加wacth监听属性，通过子组件监听props属性值来判断当前值是否有变化如果有变化就改变值重新赋值。

以下是我的代码

组件通信watch监听版

//父组件
<template>
  <div>
    <TimeLine :determine="determine"
      @updateAriplane="timeLineUpdate" />
  </div>
</template>
<script>
import TimeLine from '@/components/TimeLine'
export default {
  components: {
    TimeLine,
  },
  data () {
    return {
      determine: []
    }
  },
  methods: {
    test() {
      setTimeout(() =>{
        this.determine=[2,3,4]
      },1000)
    }
  },
}
//子组件
<script>
export default {
  data() {
    return {
      dataListArray:[]
    }
  },
  props: {
    determine: {
      type: Array,
      require: true
    }
  },
  watch: {
    determine(newValue, oldValue) {
      //props改变新的值 将更改后的值重新赋值
      this.dataListArray=newValue
    }
  },
  methods: {
    test () {
     console.log(this.dataListArray)// 打印的值即为【2，3，4】
    }

  },
}
</script>