Как получить дочерние компоненты внутри приложения 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 тянуть данных вверх.

Ref: 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. Вы получите следующее сообщение об ошибке:

[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.

Если вы хорошо изменить свой this.cells на массив объектов, то есть чистый способ сделать это как:

<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

ответ

Смежные вопросы