Как я могу указать связывающий контекст в Vue.js так же, как в knockout.js и WPF

Question

Мы используем 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
            }
        };
    }
});

Answer 1

Не существует обязательного эквивалента "с" в Vue, Есть несколько подходов к тому, что вы хотите сделать, но для вашего примера я бы использовал computed вернуть ваши данные в виде массива, а затем использовать v-for распечатать каждый компонент, пропуская соответствующие данные в виде реквизита:

Vue Instance

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/

Answer 2

Если у вас действительно вложенный ребенок, попробуйте обмануть, используя v-for с массивом из 1 элемента.

<template v-for="local in [data.nest1.nest2.nest3]">
    //normal binding using local.XXXX
</template>

Answer 3

Протестировано в 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>

ПРИМЕЧАНИЕ. Еще лучше, для более краткого кода вы можете создать подкомпонент только для и передать заголовок и параметры:

Т.е.

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