0

如果你问我，我们正在使用Vue.js ，这是一个非常好的框架。从Knockout.js和WPF我知道可以为绑定指定上下文。Vue.js 如何做到这一点？

请参见下面的示例。这binding-context是我在 Vue 中寻找的功能的伪代码。

Vue.component('hosting-setup', {
template:
    '<wizard>' +
        '<wizard-step binding-context="step1" :title="title">' +
            '<select :options="choices"></select>' +
        '</wizard-step>' +
        '<wizard-step binding-context="step2" :title="title">' +
            '<select :options="choices"></select>' +
        '</wizard-step>' +
    '</wizard>',

    data: function () {
        return {
            step1: {
                title: 'Choose virtualization software',
                choices: ['Virtual Box', 'VMWare'],
                choice: undefined,
            },
            step2: {
                title: 'Choose guest operating system',
                choices: ['Debian 6', 'Ubuntu 16', 'Windows Server 2012'],
                choice: undefined
            }
        };
    }
});
4

3 回答 3

1

中没有“with”绑定等效项Vue。您想要做的事情有几种方法，但对于您的示例，我将使用 acomputed将您的数据作为数组返回，然后用于v-for打印出将相关数据作为道具传递的每个组件：

Vue 实例

Vue.component('wizard-step', {
  template: `<div>{{title}}</div>`,
  props: ['title']
});

new Vue({
  el: '#app',
  computed: {
    wizardSteps() {
      return [this.step1, this.Step2]
    }
  },
  data() {
    return {
      step1: {
        title: 'Choose virtualization software',
        choices: ['Virtual Box', 'VMWare'],
        choice: undefined,
      },
      Step2: {
        title: 'Choose guest operating system',
        choices: ['Debian 6', 'Ubuntu 16', 'Windows Server 2012'],
        choice: undefined
      }
    };
  }
})

标记

  <wizard-step :title="step.title" v-for="(step, index) in wizardSteps" :key="index"></wizard-step>

这是 JSFiddle：http: //jsfiddle.net/craig_h_411/vzq25go5/

编辑

如果您想将数据直接传递给组件，您可以使用v-bind传递对象并将您要在组件中使用的对象属性名称声明为props，这可能更接近您的要求，因此：

Vue.component('wizard-step', {
  template: `<div>
    {{title}}
    <select>
      <option v-for="choice in choices" >{{choice}}</option> 
    </select>
  </div>`,
  props: ['title','choices']
});

父标记

  <wizard-step v-bind="step1"></wizard-step>
  <wizard-step v-bind="Step2"></wizard-step>

这是 JSFiddle：http: //jsfiddle.net/craig_h_411/7dg41j0w/

于 2017-10-30T14:10:18.510 回答
0

如果你真的有嵌套的孩子，可以尝试使用 v-for 和 1 项数组作弊。

<template v-for="local in [data.nest1.nest2.nest3]">
    //normal binding using local.XXXX
</template>
于 2018-09-09T08:42:08.537 回答
0

在 Vue 2.6.10 中测试：

<template>
    <wizard>
        <wizard-step v-if="props.step1 ? step = props.step1 : false" :title="step.title">
            <select :options="step.choices"></select>
        </wizard-step>
        <wizard-step v-if="props.step2 ? step = props.step2 : false" :title="step.title">
            <select :options="step.choices"></select>
        </wizard-step> 
    </wizard>
</template>

注意：更好的是，对于更简洁的代码，您可以创建一个子组件并传递标题和选项：

IE

<template>
    <wizard>
        <wizard-step v-if="props.step1" :step="props.step1" />
        <wizard-step v-if="props.step2" :step="props.step2" />
    </wizard>
</template>

你的孩子向导步骤将是：

<template>
    <wizard-step :title="step.title">
        <select :options="step.choices"></select>
    </wizard-step>
</template>

另一个改进是，如果您可以控制返回的数据的结构，您可以返回一个数组steps（而不是 step1 和 step2），并且您可以使用 for-each 进一步简化：

<template>
    <wizard>
        <wizard-step v-for="step in props.data" :step="step" />
    </wizard>
</template>
于 2020-02-12T22:17:43.810 回答