父组件和子组件之间相互传递数据

父组件传数据到子组件

• 父组件传递数据

<goods-view :flag="true"   />

• 子组件接收数据

子组件传数据到父组件

• 子组件传递

  handleRowClick(row) {
          this.$emit('select', row);
        },

解释：这里代码的意思是，子组件中点击了哪一行就把这一行的数据给传到父组件中

• 父组件接收

handleSelect(selectedGoods) {
          console.log('选中的商品信息：', selectedGoods);
          // 这里可以处理选中的商品信息，比如更新数据等
          this.tableData[this.selectIndex].goodsCode=selectedGoods.goodsCode
          this.tableData[this.selectIndex].goodsName=selectedGoods.goodsName
          this.tableData[this.selectIndex].id=selectedGoods.id

          console.log("------------------------")
          console.log(this.tableData)
          this.openGoods = false;
          // this.tableData.splice(this.selectIndex-1,1,selectedGoods)

        },

大数组中删一部分小数组数据

方法一

  for (let i = this.selectedRow.length - 1; i >= 0; i--) {
              const rowIndex = this.tableData.indexOf(this.selectedRow[i]);
              if (rowIndex > -1) {
                this.tableData.splice(rowIndex, 1);
              }
            }

方法二

 // 创建一个要删除的索引的集合
const indicesToRemove = this.selectedRow.map(row => this.tableData.indexOf(row));

// 使用 filter 方法来删除 selectedRows 中的所有元素
this.tableData = this.tableData.filter((item, index) =>
    !indicesToRemove.includes(index)

怎么重新渲染子组件

学生提的问题：父组件弹出子组件的 el-dialog，每次弹出的时候想初始化一下里面的组件，不然还是之前的数据，给人一种有缓存的感觉,不刷新就不变化

应用场景

如果你遇到父组件弹出子组件的时候 传过去的条件查询第一次是好的，第二次传不同条件过去后没更新的时候就这么搞就可以解决了

主要思路就是每次弹出子组件弹框的时候让子组件重新渲染一下就行

怎么重新渲染呢，就是在el-dialog加一个key，只要每次弹框的时候，这个key都变一下就会重新渲染！