javascript – Fragen zum bidirektionalen Bindungs-V-Modell

Question

Ich bin gerade mit Vue in Kontakt gekommen und habe ein paar Fragen zum V-Modell, z. B. zur Verwendung des V-Modells in untergeordneten Komponenten und schließlich zur Rückgabe von Daten an die übergeordnete Komponente über this.$emit('input', value).
Gibt es also Einschränkungen bei der bidirektionalen Bindung? Wenn Sie beispielsweise den Schlüssel/Wert der Daten in der übergeordneten Komponente bearbeiten können, können Sie dann den entsprechenden Wert eines Arrays in den Daten der übergeordneten Komponente bearbeiten?
Eine weitere Frage ist, ob es möglich ist, eine bidirektionale Bindungsoperation für ein Array im berechneten Attribut durchzuführen?

Ich habe es ausprobiert und das Operationsergebnis scheint wie im Bild oben zu sein. Deshalb möchte ich Ihnen, wenn möglich, sagen, wie ich es bedienen soll.

              <tr v-for="i in thisPageData">//thisPageData属于computed中的数组
                  <td>
                      <c-checkbox v-model="i.checked" @input="showInput"></c-checkbox>
                  </td>
                  <td>{{i.checked}}</td>
                  <td>{{ i.id }}</td>
                  <td>{{ i.code }}</td>
                  <td>{{ i.name }}</td>
                  <td>{{ i.ip }}</td>
                  <td>{{ i.description }}</td>
                  <td>{{ i.assetsNumber }}</td>
              </tr>

checkboxDie Komponente ist eine allgemeine Kontrollkästchenschaltfläche, die den Stil einheitlich steuert und letztendlich wahr und falsch zurückgibt

Answer 1

子组件与父组件的数据是单向流动的，这是为了防止子组件篡改父组件的数据造成混乱传送门

Answer 2

父子组件不允许 计算属性要自己实现set和get才行

Answer 3

子组件不能随便修改父组件属性值的
而computed计算属性的驱动都是基于它所依赖的那个变量的，一般也不会对计算属性做双向绑定

Answer 4

类似的数据交互很多的话, 搞个vuex?

Answer 5

父组件(parent)可以对子组件的input事件写method去操作parent的data中的数组

计算属性是支持set/get操作的, get就是默认操作(return value), set的参数接收你给的值, 在set中你可以写一个this.$emit('xxx', value)通过事件传出去, 如果xxx是'input', 那么可以写的更灵活

https://cn.vuejs.org/v2/guide...计算-setter