vue 父子传参传值的一些应用

200 阅读1分钟

1、父传子 props,子传父 this.$emit() , 父传子 子改变数据 传回父 .sync='' ,

//父中子元素
<flow @flows="flowClick" ref="tableFlow" :list="tableData" :loading="tableLoading" :checking.sync="checkedAll" :amount="total"></flow>

data(){
   return{
      checkedAll: false,
      tableData: [],
   },
   methods:{   //父接收子 传过来的值
      flowClick(e){
        this.selectArr = e
         },
      }
}

子接收

<el-table
class="table-content"
ref="table"
:data="list"
style="width: 100%"
v-loading="loading"
highlight-current-row
:header-cell-style="headerStyle"
@select="select"
@selection-change="handleSelectionChange"
@select-all="changeCheck"
</el-table>

    data(){
       return{
          flowArr:[]
       }
    }
props:{
  list:{
    type:Array,
    default:[]
  },
  loading:{
    type: Boolean,
    default: false
  },
  amount:{
    type: Number,
    default: 0
  }
},
    //方法中传出
    
    methods:{
         clickadd(){
          this.$emit( 'flows' ,  this.flowArr )
        },
         // 子中改变父传的值
        changeCheck(selection) {
          if( selection.length === 0 ){
            this.$emit('update:checking', false);
          }
        },
    }
    

`