Vue父子传值使用监听

Posted 2021-03-25 home-

这个小案例是我记住一句话，不管干什么只要数据变了，刷新数据就对了

子组件是个弹窗需要在父组件点击显示查看数据需要传id,话不多说！！！

父组件：

 

传id肯定是number类型所以通过属性传值的时候需要在传递的值中定义一个默认值在子组件监听传递值的变化
<LookForm  :childId="childId"></LookForm>
这个绑定的属性值就是通过点击事件传的id然后在子组件通过传递的属性接收


data:
childId: 0


事件：
show(row) {
      this.childId = row.id;
    }

 

子组件：

 

监听方法的参数就是父组件传过来的值，监听变化因为数据变了所以调一下查看接口也就是刷新数据
watch: {
    childId(newVal) {
      this.childId = newVal;
      this.getList(); //一定要刷新数据否则页面不刷新
      console.log(newVal, "这里是监听"); //这个参数就是传来的所有值
    }
  },

 在子组件props接收是number类型
  props: {
    childId: Number
  }

传给后端
id:this.childId