如何獲取Vue.js裏面的兒童組件

所以，我有一個包含多個子組件的應用程序。基本上是一個電子表格。如何獲取Vue.js裏面的兒童組件

我希望能夠計算任何單元格更改時的組件總和。我想通過在傳播更改事件時緩存它們來存儲單元格的所有值。但是，這是最好的方式嗎？有沒有更好的方式來動態抓住孩子？我明白props是發送數據的方式，但我如何提取數據？

這是HTML：

<html> 

<head> 

</head> 

<body> 

<span id="calculator"> 
<template v-for="i in 5"> 
<cell v-bind:index="i" v-on:total="total"></cell> 
</template> 
{{ subtotal }} 

{{ cells }} 
</span> 

<script src="vue.js"></script> 
<script src="app.js"></script> 

</body> 

</html>

而且app.js：

Vue.component('cell', { 
    template: "<input v-model='value' v-on:change='total' size='10' type='text'/>", 
    props: { 
    index: Number 
    }, 
    data: function() { 
     return { 
     value: 0 
     }; 
    }, 
    methods: { 
    total: function() { 
     console.log("Value is now: " + this.value + " for index: " + this.index) 
     this.$emit('total', this.value, this.index) 
    } 
    } 
}); 

var app = new Vue({ 
    data: { 
    subtotal: 0, 
    cells: [] 
    }, 
    el: "#calculator", 
    methods: { 
    total: function(value, indexPlusOne) { 
     var index = indexPlusOne-1; 
     var v = parseInt(value); 
     Vue.set(this.cells, index, v); 
     console.log("Inside the total function: " + v + " " + index); 
     this.subtotal = 0; 
     for(var i = 0; i < this.cells.length; i++) { 
     if(this.cells[i]) { 
      this.subtotal += this.cells[i]; 
     } 
     } 
    } 
    } 
});

來源

2016-12-14 xrd

這是Vuex的完美用例。 –

I understand props are the way to send data down, but how do I pull data up?

最好的辦法是使用v-model爲您定製cell成分提取數據了。

編號：https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

正如上面的鏈接解釋，<input v-model="something">是一個語法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以，你的理想的解決辦法是這樣的：

<cell v-model="item" v-for="item in all_cell_items"></cell>

從內單元格組件，您可以通過以下方式將值傳遞迴父（根）組件：this.$emit("input", newValue)。父組件（root）保持乾淨，您可以簡單地使用subTotal的計算屬性。

但是，如果您有一個普通的整數列表（如this.cells = [1,2,3,4]），並嘗試使用v-model將值傳遞給單元組件，則這不起作用。您會收到以下錯誤：如果你確定修改this.cells對象的數組

[Vue warn]: : You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.

，那麼你必須做它像一個乾淨的方式：

<cell v-model="item.price" :label="item.name" v-for="item in all_items"></cell>

這裏是一個工作的jsfiddle對於這個例子：https://jsfiddle.net/mani04/9b7n3qmt/

來源

2016-12-14 05:02:31 Mani

如何獲取Vue.js裏面的兒童組件

回答

相關問題