![](/img/trans.png)
[英]How to use same instance of an injected service across different components in Angular?
[英]How to use data or methods across different components
我在這一個組件我有表頭和其他的東西和其他組件我有TBODY所以每行的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);
}
Vue Mixins 可以解決您的問題。
Mixins 是一種為 Vue 組件分發可重用功能的靈活方式。 mixin 對象可以包含任何組件選項。 當組件使用 mixin 時,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!"
使用 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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.