改变了查询条件，视图没跟着更新

Question

谢谢各位大佬们，问题解决了，原因是改了属性后，没有再次请求后台数据的原因。至于network的改变，是因为我console.log了传参，被自己蠢哭了
我用点击事件给数据库查询条件的属性进行了更改，console.log也能看到属性被改变了，但是页面上还是一开始的查询条件所显示的结果，并没有随着我点击事件更新，我该怎么让点击事件改变查询条件的同时，页面也跟着更新呢，求大神解惑
补充下，我API传参后能获得新的数据，network都能看到发送请求改变了。主要问题就是虚拟DOM不跟着更新

    <ax-table-box
      ref="table"
      :table-header="queryHeader"
      :table-data="api.list"  //查询api
      :query-params="queryParams" //查询条件
    >
    </ax-table-box>

  async created () {
    this.queryParams = {
      flag: '00',  // 一开始的查询条件
      facilitiesName: null
    }
  }

this.queryParams.facilitiesName = 1 //点击事件里面的语句
console.log(this.queryParams) //能看到facilitiesNam已经变成1了

Answer 1

试下给当前组件及子组件的query-params都设置包含完整属性的默认对象

当前组件

data() {
  return {
    queryParams: {
      flag: '',
      facilitiesName: null,
    },

子组件

props: {
  queryParams: {
    type: Object,
    default: () => ({
      flag: '',  
      facilitiesName: null,
    }),
  },

Answer 2

原因分析：父子组件传值，父组件中的值修改了，子组件没有响应的更新
解决方法：子组件中使用computed进行数据监听转化

Answer 3

this.$set(this.queryParams, 'facilitiesName', 1)

Answer 4

可以考虑在子组件里面做一个属性深度监听

export default {
    props： {
        queryParams: {
            type: Object,
            default: () => ({
                p1: "",
                p2: ""
            })
        }
    },
    data () {
        innerQuery: {}
    },
    watch: {
       queryParams: {
            deep: true,
            immediate： true，
            handle(val) {
                this.innerQuery = val
            }
        } 
    }
}

还有一种简单粗暴的处理方式，直接在父组件中对子组件进行条件渲染，参数变化时也让子组件重新渲染一次