vue父页面实时给子页面传值

 

实操笔记：

设置set

this.DataList = []
      
const varName='formObj'
this[varName].PkIds && delete this[varName].PkIds
      
         
 this.$set(this.formObj,'PkIds',[])
// this.formObj.PkIds=[]

三级联动：

删除选择框的数据

删除选中的数据

设置选中的v-model为 [ ]

 

父页面实时调用子页面方法，传值与同页面相似（一样）

 

根据选择不同的选择项，展示不同的数据，选择项 在父组件  数据响应项在子组件中展示。

 

<forSake ref="getDtId"></forSake>

 

// 父页面点击选择
    getForSakeData(){
        

      this.$refs.getDtId.getAop(this.data)
      

    }

 

methods: {
    getAop(data) {
      
     
      getAop(data).then(res=> {
        this.getGOdLost= []
        this.getGOdLost= res
       
      })
    }
  }

 

实测：第一次选择父页面组件的选择项，会刷新子页面组件数据

vue父页面实时给子页面传值，子页面没有刷新

场景：vue父页面传值，参数为data,

问题：父页面改变data的值，子页面没有实时更新？

解决方法：

1.父页面参数加一个 .sync

 

 

<forSake :data.sync="plante"></forSake>

 

2.子页面watch 参数的变化，并执行function

 

watch:{
        data(value,oldvalue){
            this.data= value;
            this.getNewList();
        }
    }