this.$refs传参数的写法

青竹微白

已于 2024-04-06 17:42:38 修改

阅读量166

点赞数 3

文章标签：前端 javascript vue.js

于 2024-03-28 19:05:46 首次发布

本文链接：https://blog.csdn.net/qq_69775429/article/details/137121275

版权

本文介绍了在Vue.js中，父组件如何向子组件传递数据（如`userinfo`），以及子组件如何接收并处理来自父组件的数据（如`productDetail`或`shopData`）。子组件通过方法`eidtshopDataf`处理数据，强调了在数据改变时使用`watch`的必要性。

摘要由CSDN通过智能技术生成

  <sale-child :saleOrderId="saleOrderId" :status="status"  @onLoadTableData="onLoadTableData" ref="saleChild"></sale-child>


 if(tab.name==13){
       
        this.orderProduct=this.form;
      console.log(this.orderProduct,'12344');
      this.$refs.saleChild.userinfo=this.orderProduct;//父组件向子组件传递数据，子组件中直接定义并使用userinfo
    
      if(this.status==11){
        
        this.$refs.saleChild.eidtshopDataf(JSON.parse(JSON.stringify(this.productDetail)))//子组件操作数据的话通过方法传递给子组件，子组件接受可以对数据进行操作并且使用
      }else{
        this.$refs.saleChild.eidtshopDataf(JSON.parse(JSON.stringify(this.shopData)))
         // this.$refs.saleChild.shopData=this.shopData;
      }

子组件

 methods:{
        eidtshopDataf(rowData){
         // console.log('11111',rowData)
                 //计算数据的方法在数据改变后会出现错误，应该使用watch来计算总和
          this.shopData=rowData;
             this.shopData.forEach((item)=>{
              this.allPrice+=item.allPrice;
              this.allNumber+=item.count- 0;
               this.salePrice+=item.price- 0;
              
             });
             if(this.allPrice){
              this.allPrice=this.allPrice.toFixed(2); 
             }
        },

总结：

this.$refs.子组件名称.子组件中的数组=父组件中赋值数组，子组件可直接使用

this.$refs.saleChild.eidtshopDataf(JSON.parse(JSON.stringify(this.productDetail)))//子组件操作数据的话通过方法传递给子组件，子组件接受可以对数据进行操作并且使用