Question

我有一个HTML表，在其中一个组件中有表头和其他内容，在另一个组件中有正文，因此在tbody的每一行中，我都添加了一个删除行按钮，该按钮我想删除，但是数据在thead组件中，此处没有父子关系，所以我该怎么做。

我的代码

Vue.component("form-row", {
  template: "#row-template",
  props: {
    itemname: String,
    quantity: Number,
    sellingprice: Number,
    amount: Number
  },
  methods: {
    delete() {
      alert("tedt")
    }
  },
  computed: {
    quantitySynced: {
      get() {
        return this.quantity;
      },
      set(v) {
        this.$emit("update:quantity", +v);
      }
    },
    sellingpriceSynced: {
      get() {
        return this.sellingprice;
      },
      set(v) {
        this.$emit("update:sellingprice", +v);
      }
    },
    amountSynced() {
      this.$emit("update:amount", parseFloat(this.quantity) * parseFloat(this.sellingprice));
      return this.amount
    }
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      tableDatas: []
    };
  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        amount: 55
      });
    }
  },
  computed: {
    calculate() {
      return (
        this.tableDatas.reduce((total, {
          amount
        }) => total + amount, 0) || 0
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="btnOnClick">Add</button>
  <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>
        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <form-row v-for="(row, key) in tableDatas" :key="key" v-bind.sync="row"></form-row>
    </tbody>
  </table>
  <div>
    <label>Total Row's Amount</label>
    <input type="text" disabled :value="calculate">
  </div>
</div>

<script type="text/x-template" id="row-template">
  <tr>
    <td>
      <input class="form-control" readonly :value="itemname" />
    </td>
    <td>
      <input class="form-control text-right" type="number" min="0" step="1" v-model="quantitySynced" />
    </td>
    <td>
      <input class="form-control text-right" type="number" min="0" step=".5" v-model="sellingpriceSynced" />
    </td>
    <td>
      <input readonly class="form-control text-right" type="number" min="0" step="1" :value="amountSynced" />
    </td>
    <td>
      <button>Delete</button>
    </td>
  </tr>
</script>

这里我有两个组件。在一个组件删除按钮中，我知道如何使用以下命令删除同一组件中的行：

delete(index) {
  console.log("Removing", index);
  this.tableDatas.splice(index, 1);
}

Answer 1

Vue Mixins将解决您的问题。

Mixin是分配Vue组件可重用功能的灵活方法。 mixin对象可以包含任何组件选项。当组件使用混入时，混入中的所有选项都将被“混入”到组件自己的选项中。

这里是一个例子；

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

Answer 2

使用Shared事件在父级组件之间进行捕捉

var sharedEvents = new Vue();---declare on top of the vue instance 

//parent
new Vue({
  el: "#app",

  ---code--

  methods:
     getData(){
     //emit the data in parent like this 
         sharedEvents.$emit('forceInjectGridData', {id: "billing-grid", data: data});
     }

  });

并在下面的任意位置捕获组件中的数据：

 methods:{
  forceInjectGridData(v) {

            if (this.id === v.id) {
                this.gridData = v.data;
              //do your coding here 
            }
        },

 } ,
  mounted(){
   sharedEvents.$on('forceInjectGridData', this.forceInjectGridData);
   }

如何跨不同组件使用数据或方法

2 个答案: