Vue で親コンポーネントから子コンポーネントにデータを転送するにはどうすればよいですか?コンポーネント インスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照できないことを意味します。親コンポーネントのデータは、props を通じて子コンポーネントに送信する必要があります。つまり、props は、子コンポーネントが親コンポーネントのデータにアクセスするための唯一のインターフェイスです。したがって、子コンポーネントは props を使用して親コンポーネントを参照する必要があります。
つまり、props
は、子コンポーネントが親コンポーネントのデータにアクセスするための唯一のインターフェースです。
詳細な説明は次のとおりです:
コンポーネントはテンプレート内のデータを直接レンダリングできます (二重中括弧)。
サブコンポーネントは、テンプレート内の親要素のデータを直接レンダリングできません。
子コンポーネントが親要素のデータを参照したい場合は、propで変数(aなど)を宣言すると、この変数が親要素のデータを参照できるようになります。次に、この変数 (前の a) をテンプレート内でレンダリングします。このときにレンダリングされるのは、親要素内のデータです。
<p id="app1"> <!-- hello引用父元素的hello,它也可以引用message,greet,world等 --> <child :hello='hello'></child> </p> <script> var com1 = Vue.component('child',{ // 声明在prop中的变量可以引用父元素的数据 props:['hello'], // 这里渲染props中声明的那个hello template:'<p><p>{{ hello }}</p></p>', }) var app1 = new Vue ({ el: '#app1', data: { greet: { hello:'hello,', world: 'world', }, message: 'message1', } }) </script>
<!-- 在 HTML 中使用 kebab-case --> <child my-message="hello!"></child> <script> Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) </script>
子コンポーネント内の props を変更しないでください。これを行うと、Vue はコンソールで警告を出します。
2 つのケースでは、prop 内のデータを変更する誘惑に駆られがちです。
Prop が初期値として渡され、サブコンポーネントはそれをローカル データとして使用したいと考えています
Prop 生データとして渡され、サブコンポーネントによって出力される他のデータに処理されます。
これら 2 つの状況に対処する正しい方法は次のとおりです:
ローカル変数を定義し、prop の値で初期化します:props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
例:
<p id="app3"> <my-component :object='object'></my-component> </p> <script src="http://vuejs.org/js/vue.min.js"></script> <script> // var mycom = Vue.component('my-component', { //添加一个input改变子组件的childOject,那么父元素的object也会被改变,但是Vue没有报错! template: '<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>', props: ['object','school'], data: function () { // 子组件的childObject 和 父组件的object 指向同一个对象 return { childObject: this.object } } }); var app3 = new Vue({ el: '#app3', data: { object:{ name: 'Xueying', age: '21', }, school:'SCUT', }, }) </script>
4. Props 検証
は prop 検証を指定できます。ルールと Vue は、受信データが要件を満たしていない場合に警告を発行します。
$parent を使用して親コンポーネントのデータにアクセスすることもできます。
props を使用できる場合は、props を使用してデータを明示的に渡すようにしてください (親コンポーネントのどのデータが子コンポーネントによって参照されているかを明確かつ迅速に確認できます)。
一方、子コンポーネント内で親コンポーネントのデータを直接変更するのは悪い考えです。props の一方向のデータ フローにはこの心配はありません。
関連する推奨事項:
vue スロット 子コンポーネントに渡された親コンポーネントを表示する方法
vue の props は、子コンポーネントが親コンポーネントに応じて変化することを認識します
以上がVue のサブコンポーネントはどのようにして親コンポーネントの値を取得するのでしょうか? (小道具の実装)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。