关于Vue2watch

项目场景：

在项目设计过程中,数据需要在兄弟组件间通信.

• SearchForm组件收集请求表单
• 将请求通过axios传递到后端
• 后端请求数据库
• (请求成功)数据传递回前端,在DataForm组件显示

---

问题描述:

由于数据量大,前端需要懒加载进行显示.想法是将SearchForm组件将后端返回的数据传递给父组件,再由父组件传递给DataForm组件.在这里遇到了些问题,记录一下:

• 数据传递过来后由于要实现懒加载,我又在DataForm组件设计了一个执行懒加载操作的按钮,将拿到的数据进行显示.这造成了一个愚蠢的问题:在查询完成之后,还需要点击一次显示按钮,数据才能显示!
• 后来的思路是利用watch对一个isChanged值进行监听,当每次查询完成之后,对isChanged值进行取反,这里又遇到一个小问题:当我把isChanged挂载在this下面时,watch似乎没有能够捕捉到值的改变.

---

解决方案：

最后还是利用props传值,在父组件中创建了一个isChanged值与isChanged的取反方法,将方法传递给SearchForm组件,每次SearchForm查询完成后调用一次取反方法,改变isChanged值(在父组件中),再将这个值传递给DataForm组件,watch监听这个属性的变化.

父组件:

<template>
  <div>
    <search-form :updateData="updateData"></search-form>
    <data-form :isChanged="isChanged"></data-form>
    <data-analyse></data-analyse>
  </div>
</template>

<script>
/* *****  */
export default {
  name: 'ACL',
  components: { SearchForm, DataAnalyse, DataForm },
  data() {
    return {
      /* 省略其他内容 */
      isChanged:true,
    }
  },
  methods: {
    updateData(){
      this.isChanged = !this.isChanged
    },
    /* *** */
  },
}
</script>

SearchForm组件:

<template>
	/* *** */
</template>

<script>
    /* *** */
    export default {
        /* *** */
        props: ['updateData'],
        methods:{
            async getDataList(x){
                /* *** */
                this.updateData()
            }
        }
    }
</script>

DataForm组件:

<template>
	/* *** */
</template>

<script>
    /* *** */
    export default {
        /* *** */
        props: ['isChanged'],
        watch:{
    		isChanged: function() {
    			/* *** */
    		}
  		},
    }
</script>

总结

写的太丑了…