Vue コンポーネント間の値の転送の強さの分析

Vue を使い始めるときは、コンポーネントについて言及する必要があります。場合によっては、コンポーネントは相互に値を渡す必要があります。たとえば、親コンポーネントは子コンポーネントに値を渡し、子コンポーネントは子コンポーネントに値を渡す必要があります。コンポーネントは親コンポーネントに値を渡す必要があるため、次のように強度を使用して詳細を説明します。

効果:

こんな効果を実現したいのですが、入力ボックスに文字を入力して送信ボタンをクリックすると、対応する入力内容が下に表示されます。何かをクリックすると、コンテンツが消えます。

以下に示すように、たとえば 2 をクリックすると 2 が消えます

##分析:

1. まず、入力コンテンツを取得し、すべての入力コンテンツを配列に収集し、

でデータをループします。

は同じ構造なので、

をコンポーネントにできます。配列は親レイヤーにあり、定義された

コンポーネントは子コンポーネント。これは、親コンポーネントが子コンポーネントに値を渡し、データを子コンポーネントに渡すことを意味します。

2. オプションの

をクリックすると、オプションが表示されなくなります。次に、

コンポーネントは、現在どのコンポーネントがクリックされているか、および親レイヤーの配列データのどれを削除する必要があるかを親コンポーネントに上向きに通知します。これは値を渡すサブコンポーネントです。親コンポーネント。

<div id="root">
        
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
        
        <ul>
            <todo-item v-bind:content="item" 
                       v-bind:index="index" 
                       v-for="(item,index) in list"
                       @delete="handleItemDelete"
            ></todo-item>
        </ul>
    </div>

    <script>

        var TodoItem={
            props:[&#39;content&#39;,&#39;index&#39;],
            template:"<li @click=&#39;handleItemClick&#39;>{{content}}</li>",
            methods:{
                handleItemClick:function(){
                    this.$emit(&#39;delete&#39;,this.index);
                }
            }
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>

コードを通して、サブコンポーネントから親コンポーネントに渡される主な値がここにあることを見つけるのは難しくありません:

this.$emit('delete',this.index);

さらに、次のことに注意してください。 Vue では、$ で始まるものはすべて vue インスタンス属性またはメソッドと呼ばれます。これに加えて、Submit などのいくつかの略語にも注意する必要があります。 Submit も同じ効果があります。

関連する推奨事項: "

javascript Advanced Tutorial"

上記は、Vue コンポーネント間の価値移転、昇進、昇給の強さの分析です、皆さん、さあ！

以上がVue コンポーネント間の値の転送の強さの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。