ホームページ > 記事 > ウェブフロントエンド > Vue のサブコンポーネントはどのようにして親コンポーネントの値を取得するのでしょうか? (小道具の実装)

Vue のサブコンポーネントはどのようにして親コンポーネントの値を取得するのでしょうか? (小道具の実装)

不言オリジナル: 2018-07-23 14:13:4232251ブラウズ

Vue で親コンポーネントから子コンポーネントにデータを転送するにはどうすればよいですか?コンポーネントインスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照できないことを意味します。親コンポーネントのデータは、props を通じて子コンポーネントに送信する必要があります。つまり、props は、子コンポーネントが親コンポーネントのデータにアクセスするための唯一のインターフェイスです。したがって、子コンポーネントは props を使用して親コンポーネントを参照する必要があります。

つまり、propsは、子コンポーネントが親コンポーネントのデータにアクセスするための唯一のインターフェースです。

詳細な説明は次のとおりです:

コンポーネントはテンプレート内のデータを直接レンダリングできます (二重中括弧)。

サブコンポーネントは、テンプレート内の親要素のデータを直接レンダリングできません。

子コンポーネントが親要素のデータを参照したい場合は、propで変数(aなど)を宣言すると、この変数が親要素のデータを参照できるようになります。次に、この変数 (前の a) をテンプレート内でレンダリングします。このときにレンダリングされるのは、親要素内のデータです。

1. 基本的な使用法

    <p id="app1">
        <!-- hello引用父元素的hello，它也可以引用message,greet，world等 -->
        <child :hello=&#39;hello&#39;></child>
    </p>
    <script>
        var com1 = Vue.component(&#39;child&#39;,{
            // 声明在prop中的变量可以引用父元素的数据
            props:[&#39;hello&#39;],
           // 这里渲染props中声明的那个hello
            template:&#39;<p><p>{{ hello }}</p></p>&#39;,
        })

        var app1 = new Vue ({
            el: &#39;#app1&#39;,
            data: {
                greet: {
                    hello:&#39;hello,&#39;,
                    world: &#39;world&#39;,
                },
                message: &#39;message1&#39;,
            }
        })
    </script>

2. js でキャメルケースの名前を使用し、ダッシュ区切り文字に置き換えます。 html 式の名前付け

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

<script>
    Vue.component(&#39;child&#39;, {
        // 在 JavaScript 中使用 camelCase
        props: [&#39;myMessage&#39;],
        template: &#39;<span>{{ myMessage }}</span>&#39;
    })
</script>

3. 一方向のデータフロー: プロパティは一方向にバインドされます

親コンポーネントのプロパティが変更されると、子コンポーネントに送信されますが、その逆は起こりません。

親コンポーネントが更新されるたびに、子コンポーネントのすべてのプロパティが最新の値に更新されます。

子コンポーネント内の props を変更しないでください。これを行うと、Vue はコンソールで警告を出します。

2 つのケースでは、prop 内のデータを変更する誘惑に駆られがちです。

Prop が初期値として渡され、サブコンポーネントはそれをローカルデータとして使用したいと考えています

。
Prop 生データとして渡され、サブコンポーネントによって出力される他のデータに処理されます。
これら 2 つの状況に対処する正しい方法は次のとおりです:
ローカル変数を定義し、prop の値で初期化します:

    props: [&#39;initialCounter&#39;],
    data: function () {
      return { counter: this.initialCounter }
    }

計算されたプロパティを定義し、prop の値を処理して返します:

    props: [&#39;size&#39;],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }

次の点に注意してください。 JavaScript では、オブジェクトと配列は参照型であり、同じメモリ空間を指します。prop がオブジェクトまたは配列の場合、子コンポーネント内で変更すると親コンポーネントの状態に影響します。

例:

    <p id="app3">
        <my-component :object=&#39;object&#39;></my-component>
    </p>
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <script>
        //
        var mycom = Vue.component(&#39;my-component&#39;, {
            //添加一个input改变子组件的childOject，那么父元素的object也会被改变，但是Vue没有报错！
            template: &#39;<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>&#39;,
            props: [&#39;object&#39;,&#39;school&#39;],
            data: function () {
                // 子组件的childObject 和 父组件的object 指向同一个对象
                return {
                    childObject: this.object
                }
            }
        });
        var app3 = new Vue({
            el: &#39;#app3&#39;,
            data: {
                object:{
                    name: &#39;Xueying&#39;,
                    age: &#39;21&#39;,
                },
                school:&#39;SCUT&#39;,
            },
        })
    </script>

画像: childObject.name を変更すると、object.name も変更されます

画像: コンソール出力 app3.object.name

4. Props 検証

は prop 検証を指定できます。ルールと Vue は、受信データが要件を満たしていない場合に警告を発行します。

特定の検証ルールについては公式ドキュメントを参照してください: Prop 検証ルール

5. $parent

$parent を使用して親コンポーネントのデータにアクセスすることもできます。

そして、子コンポーネントは、エラーを報告せずに $parent を通じて親コンポーネントのデータを直接変更できます。

props を使用できる場合は、props を使用してデータを明示的に渡すようにしてください (親コンポーネントのどのデータが子コンポーネントによって参照されているかを明確かつ迅速に確認できます)。

一方、子コンポーネント内で親コンポーネントのデータを直接変更するのは悪い考えです。props の一方向のデータフローにはこの心配はありません。