knockout.jsとWPFのようにVue.jsでバインディングコンテキストを指定するにはどうすればいいですか

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には "with"というバインディングはありません。そこあなたが何をしたいかについて、いくつかのアプローチがありますが、あなたの例のために私は配列としてデータを返すためにcomputedを使用して、小道具などの関連データを渡し、各コンポーネントをプリントアウトするv-forを使用します。

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

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 
     } 
    }; 
    } 
}) 

マークアップは、ここにJSFiddleです：http://jsfiddle.net/craig_h_411/vzq25go5/

EDIT

あなたが直接コンポーネントにまでデータを渡したい場合、あなたはどの多分、オブジェクトを渡すと、あなたがpropsとしてコンポーネントで使用するオブジェクトのプロパティ名を宣言するv-bindを使用することができますそう、あなたが求めているものに近づく：

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/