ヴュー：テンプレートが問題

Question

私はVueの中に新しいですし、私はテンプレートに小道具値を代入しようとしています...ここで

がテンプレートである小道具： CustomInput.vue

<template> 
<div class="col-md-6"> 
    <label for="" class="control-label"></label> 
    <div class="input-wrapper"> 
     <input data-val="true" id="" name="" class="form-control" type="text"> 
     <span class="field-validation-valid" data-valmsg-for="" data-valmsg-replace="true"></span> 
    </div> 
</div> 

どのように私は別のファイルにあるカスタムタグから、に値を設定することができます。

Edit.vue

<custom-input label-value="Office" label-name="Office" input-id="Office" input-name="Office" :input-v-model="contact.office">Office</custom-input> 

Answer 1

はい、これは非常に簡単ですので、まず、私は公式ドキュメントにあなたをリンクします：

https://vuejs.org/v2/guide/components.html#Props

だから、どのようにこれはあなたのコードに適用されますでしょうか？ 、このような

<label v-bind:id="id" :name="name"> {{ message }} </label> 

と何かをあなたのメインアプリですべての まず、あなたはそれを行うならば、あなたはtemplateにこのような何かをやって終わるだろうv-bind、または速記: .. を使用する必要がありますテンプレートのインポート場所：今

<custom-input :name="yourNameVar" :id="yourIdVar"></custom-input> 

を、あなたは再びあなたのテンプレートに頭の上と、このコマンドを使用して、あなたの小道具idとnameを登録：props: [id, name]。 <custom-input>のバインディングは、テンプレート内の使用変数/登録済み小道の名前であることが重要です！

基本的に、あなたはこのような何か行うことができます：

<input :id="myShinyIdProperty"> 

を今すぐあなたのテンプレートタグは次のようになります。あなたがしたい場合

<your-template-tag :myShinyIdProperty="someVar"></...> 

これは、プロパティを持つものを行うための正しい方法でありますさらに、ドキュメント全体を読むことを検討してください。リンクは上にあります.. Vueは素晴らしいです;）