在VueJS中，是否可以用v模型绑定某些东西，然后将其绑定到另一个孩子？ [英] In VueJS is it possible to bind something with v-model that is then rebound to another child?

问题描述

我有一个要为其创建自定义组件的应用程序，该组件将输出表格的单行。它包含一个用户可调整的数字字段，因此在该自定义组件中我正在使用类星体框架中的另一个自定义组件（ q-numeric ）。我正在努力查看如何通过2个组件在顶层绑定变量-也许不能直接完成，但是我希望避免在中间组件中使用很多额外的代码。到目前为止，从上到下看起来是这样的：

I have an app for which I'm creating a custom component that will output a single row of a table. It contains a numeric field which is user-adjustable, and so within that custom component I'm using another custom component from the quasar framework (q-numeric). I'm struggling to see how I can bind a variable at the top-level through 2 components - perhaps it can't be done directly, but I was hoping to avoid lots of extra code in the middle component. So far it looks like this from the top down:

在App.vue模板中，我有这样的行：

In the App.vue template, I have lines like this:

<config-item v-model="numParticipants">Number of Participants</config-item>

ConfigItem.vue，看起来像这样：

ConfigItem.vue, looks like this:

<template>
  <tr>
    <td class="text-right"><slot></slot></td>
    <td class="text-right">
      <q-numeric
        v-model="value"
        :min="min"
        :max="max"
        :step="step"
        @input="$emit('input', value)"
      ></q-numeric>
    </td>
  </tr>
</template>

<script>
  export default {
    props: {
      label: String,
      value: Number,
      min: {
        type: Number,
        default: 1
      },
      max: {
        type: Number,
        default: 1000
      },
      step: {
        type: Number,
        default: 1
      }
    }
  }
</script>

但是那当然是行不通的，因为我现在绑定属性 值到 q数值，这将使它变异。确实，我不想将顶级变量 numParticipants 绑定到 q-数字-是否可以在 config-item 组件中实现某种通过？还是我的组件需要具有自己的数据元素，并根据传入的属性对其进行初始化，并根据 q-numeric 进行更新？我知道我可以做到这一点，但我希望有一个更干净的解决方案...

But of course that won't work, because I'm now binding the property value to the q-numeric, which will mutate it. Really, I wan't to bind the top-level variable numParticipants to the q-numeric - is it possible to implement some kind of 'pass through' within my config-item component? Or does my component need to have it's own data element which it initialises from the passed-in properties, and updates in response to the q-numeric? I know I can do that, but I was hoping for a cleaner solution...

推荐答案

更新：您可以通过基于prop计算可写内容来将 v模型-能力向下传播到层次结构中（prop必须命名为 value '）。 get 函数显然返回prop值； set 函数执行 $ emit 。

Update: You can propagate v-model-ability down a hierarchy by making a writable computed based on the prop (the prop must be named 'value'). The get function obviously returns the prop value; the set function does the $emit.

计算规范是完全固定的，因此我将其提取为常量。

The computed spec is entirely fixed, so I have extracted it as a constant.

const vModelComputed = {
  get() {
    return this.value;
  },
  set(newValue) {
    this.$emit('input', newValue);
  }
};

new Vue({
  el: '#app',
  data: {
    numParticipants: 1
  },
  components: {
    middleComponent: {
      props: ['value'],
      template: '<div>Value: {{value}} <q-numeric v-model="localValue"></q-numeric></div>',
      computed: {
        localValue: vModelComputed
      },
      components: {
        qNumeric: {
          props: ['value'],
          template: '<div><input v-model="localValue" type="number"> inner value: {{value}}</div>',
          computed: {
            localValue: vModelComputed
          }
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
  Participants: {{numParticipants}}
  <middle-component v-model="numParticipants"></middle-component>
</div>

这篇关于在VueJS中，是否可以用v模型绑定某些东西，然后将其绑定到另一个孩子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！