この記事は公式の文書からのものです。
http://cn.vuejs.org/guide/components.html#props
このチュートリアルは、編集者が公式文書と組み合わせて編集するより詳細で包括的なチュートリアルで、特に初心者に読むのに適しています。
データ配信を提案します
①コンポーネントインスタンスのスコープ：
同じ名前の属性がある場合でも、それは隔離されており、簡単に言えば、コンポーネント間で値は共有されません。
<div id = "app"> <add> </add> <del> </del> </div> <script> var vm = new vue（{el： '＃app'、コンポーネント：{"add"：{add "：{<butth> btn：{{btn}}} </button>" {Template： "<button> btn：{{btn}} </button>"、data：function（）{return {btn： "456"}}}}）; </script>レンダリング結果は次のとおりです。
2つのボタン、最初のボタンの値は123で、2番目のボタンの値は456です（どちらもBTNですが）
propsを使用して静的データをバインドします。
[1]この方法は文字列を渡すために使用され、値は親コンポーネントのカスタム要素に記述されます。
【2】親コンポーネントのデータ属性の値を渡すことはできません
【3
サンプルコード：
<div id = "app"> <btn = "h"> </add> </div> <script> var vm = new vue（{el： '＃app'、data：{h： "hello"}、components：{"add"：{props：['btn']、template： "<button> btn：{btn>" </butt> {btn： "123"}}}}）; </script>この執筆方法では、BTNの値は123ではなくhです。
【4】ラクダ執筆方法
補間がラクダの場合、
HTMLタグでは、HTMLの特性はケース非感受性（LiやLiなどが同じ）であるため、HTMLタグに渡される値は、ケースに敏感であるために短い水平線（BTNテストなど）として記述する必要があります。
小道具アレイでは、補間と一致し、ラクダ（btntestなど）として書かれている必要があります。
例えば：
小道具：['btntest']、テンプレート： "<button> btn：{{btntest}} </button>"、正しい書き込み：
<btn-test = "h"> </add>を追加します
補間が短い水平線タイプで記述されている場合、またはHTMLタグがラクダスタイルで記述されている場合、正常に有効になりません。 （補間がケースの制限をスキップするキャメルスキップとして書かれていない限り）
propsを使用したダイナミックデータのバインド：
簡単に言えば、親コンポーネントのデータと一致して、子コンポーネントを特定の補間を行うことです。
それを書く標準的な方法は（V-Bindを使用）です：
<add v-bind：子コンポーネントの値= "親コンポーネントのプロパティ"> </add>
コードとして
<div id = "app"> <add v-bind：btn = "h"> </add> </div> <script> var vm = new vue（{el： '＃app'、data：{h： "hello"}、コンポーネント：{"add"：{props：['btn']、template： "<button> butt> {button> （）{return {'btn'： "123"}; </script>説明：
【1 btnで使用される親コンポーネントデータのhの値。
【2did子コンポーネントのデータの関数における返品値が上書きされます。
[3]言い換えれば、親コンポーネントの値（属性名に基づく）が使用され、ラベルの値は文字列として使用されます。
propsを使用する必要があります。そうしないと、データにBTNの値を使用します
riTerliTeral and Dynamic構文：
[1]簡単に言えば、Vバインドを追加しないと、文字通りの量を渡します。つまり、文字列として扱われます（たとえば、1は文字列であり、数値タイプではありません）。
【2】vバインドを追加すると、js式が渡されます（親コンポーネントの値を渡すことができます）。
【3 vind V-Bindを追加した後、親コンポーネントの値が見つかる場合、親コンポーネントの値が使用されます。対応するものがない場合、それはJS式と見なされます（たとえば、1+2は3と見なされ、{a：1}はオブジェクトと見なされます）。
コードとして：
<div id = "app"> <add v-bind：btn = "1+2"> </add> </div> <script> var vm = new vue（{el： '＃app'、data：{h： "hello"}、コンポーネント：{"add"：{props：['btn']、template： "<button> btn：{ }}）; </script>ここでのbtnの値は3です（v-bindを追加せずに文字列として1+2ではなく）
⑤Propsバインディングタイプ：
[1]簡単に言えば、それは2つのタイプ、すなわち一方向結合（親コンポーネントは子コンポーネントに影響を与える可能性がありますが、反対は不可能です）と双方向結合（子コンポーネントも親コンポーネントに影響する可能性があります）に分割されます。
【2】一元配置バインディングの例：（デフォルト、または.onceを使用）
<div id = "app">親コンポーネント：<入力v-model = "val"> <br/>子コンポーネント：<test v-bind：test-val = "val"> </test> </div> <script> var vm = new vue（{el： '＃app'、data：{val：1}、components：{pup：{props： "<input：" <input： "<inputs：" <pupts： "<inut：" tests： "props：" testval '] v-model = 'testval'/> "}}}）; </script>説明：
親コンポーネントの値が変更されると、子コンポーネントの値も変更されます。
子コンポーネントの値が変更されると、親コンポーネントの値は変更されません。親コンポーネントの値が再び変更された場合、子コンポーネントは再び同期されます。
また、子コンポーネントを同期してバインドしたい場合、子コンポーネントの入力はV-Modelである必要があり、値属性ではなく、単一項目のバインディングのみであり、子コンポーネントの値を変更した後にバインディングが失われることに注意してください。
【3】双方向の結合：
「.sync」は修飾子として必要です
例として：
<div id = "app">親コンポーネント：<入力v-model = "val"> <br/>子コンポーネント：<test：test.sync = "val"> </test> </div> <script> var vm = new vue（{el： '＃app'、data：{val：1}、components：{"：{prop： 'prop：' <'<' test '、<' prop：" <'pups： "<inputs：" <inputs'、 v-model = 'test'/> "}}}）; </script>効果は、どの値が変化しても、それに応じて変化するということです。
【4】提案検証：
簡単に言えば、コンポーネントがデータを取得すると、検証に使用され、条件が満たされた場合にのみ使用されます。
ライティング方法は、プロップをオブジェクトに変えることであり、検証される値はオブジェクトのキーであり、検証条件はキーに対応する値です。
例えば：
小道具：{test：{twoway：true}}、テスト変数が双方向の縛られていることを確認し、そうでない場合はエラーが報告されます。 （これは一方向の結合を検証するために使用できないことに注意してください）。
サンプルコードは次のとおりです。
<div id = "app">親コンポーネント：<入力v-model = "val"> <br/>子コンポーネント：<test：test = "val"> </div> </div> <script> var vm = new vue（{el： '＃app'、data：{val：1}、コンポーネント：{test：{prup：{twoway： "<true：" <true： "<thumplate：{speaway：" <prate： "<prate：" v-model = 'test'/> "}}}）; </script>詳細なタイプについては、公式のチュートリアルをご覧ください。
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
上記は、編集者が紹介したVuejsの9番目の記事のデータ転送例のコンポーネント範囲と小道具の詳細な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！