vueのデータバインディング方法を詳しく解説

ご存知のとおり、vue は一方向のデータ フローであり、次のように子コンポーネントは親コンポーネントの変数を直接変更できません:

parent.vue

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        }
    }
</script>

Children.vue

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击改变children的msg</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

ページは次のとおりです:

クリック後:

上記は、データを渡す最も基本的な親です。子コンポーネントによる変数の変更は親コンポーネントには影響しません。では、親コンポーネントと子コンポーネントを同期したい場合はどうすればよいでしょうか。現時点では、this.$emit() 関数を使用する必要があります。

#最初のタイプ: v-model transfer

親コンポーネントの変更:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children v-model="msg"></children>
    </p>
</template>

サブコンポーネントの変更:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;input&#39;, "child")
            }
        }
    }
</script>

注: モデル部分は省略できません。this.$emit() によってトリガーされるイベントが入力されます (戻りイベントが親コンポーネントに明示的にバインドされていない場合は、入力します)はデフォルトです)、渡される値は次のように child

ページです:

クリック後:

親の値が表示されることがわかります。

2 番目のタイプ: 応答イベント (@) を明示的に指定します。

# 親コンポーネントの変更:

<template>
    <p>
        <p>parent:{{ msg }}</p>
        <children @upChange="changeMsg" :msg="msg"></children>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;
            }
        },
        components: {
            children
        },
        methods: {
            changeMsg() {
                this.msg = "收到子组件信号，嘤嘤嘤"
            }
        }
    }
</script>

子コンポーネントの変更:

<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "给你一个value")
                this.msg = &#39;from children&#39;
            }
        }
    }
</script>

ここでは、発行後の msg の値を意図的に変更しました。これは不可能であることがわかったので、発行は次のとおりだと思います。キューの最後に実行される非同期関数。これは、値がここで「子から割り当てられる」ことを意味し、最終的には上書きされます。

this.$emit() の 2 番目のパラメータは親コンポーネントに値を渡すことができるので、これは非常に便利です。

このページは次のとおりです:

クリック後:

#どちらの方法も基本的には期待どおりの結果を達成できます。特定の状況に応じて使用できます。父親と息子の間のコミュニケーションについて話した後、子と子のコンポーネント間でコミュニケーションを行うのは自然なことです。実際、あなたは賢いので、その方法を理解しているはずです。そう、親コンポーネントを踏み台にして、子コンポーネントがコミュニケーション効果を発揮できるようにするのです。

これは小さな例です:

親コンポーネント:

<template>
    <p>
        <children @upChange="changeMsg" :msg="msg"></children>
        <children2 :msg2="msg2"></children2>
    </p>
</template>
<script>
    import children from &#39;@/components/children&#39;
    import children2 from &#39;@/components/children2&#39;
    export default {
        name: &#39;parent&#39;,
        data() {
            return {
                msg: &#39;from parent&#39;,
                msg2: &#39;from parent&#39;
            }
        },
        components: {
            children,
            children2
        },
        methods: {
            changeMsg(value) {
                this.msg = value
                this.changeChild2()
            },
            changeChild2() {
                this.msg2 = "children2收到 children2收到  over over！"
            }
        }
    }
</script>

サブコンポーネント 1:

<template>
    <p>
        <p>children:{{ msg }}</p>
        <p>
            <button @click=&#39;changeChild&#39;>点击呼叫children2</button>
        </p>
    </p>
</template>
<script>
    export default {
        name: &#39;children&#39;,
        data () {
            return {
          
            }
        },
        model: {
            prop: "msg"
        },
        props: [&#39;msg&#39;],
        methods: {
            changeChild() {
                this.$emit(&#39;upChange&#39;, "children2，children2，收到请回答，收到请回答")
            }
        }
    }
</script>

サブコンポーネント 2:

<template>
    <p>
       <p>children2: {{ msg2 }}</p>
    </p>
</template>
<script>
    export default {
        name: &#39;children2&#39;,
        data () {
            return {

            }
        },
        props: [&#39;msg2&#39;]
    }
</script>

ページは次のとおりです:

この記事では、vue のデータバインディング方法について詳しく説明していますので、関連する内容をご覧ください。 PHP中国語ウェブサイトへ。 関連する推奨事項:

単純な PHP MySQL ページング クラス

再帰を使用しない 2 つのツリー配列コンストラクター

HTMLをExcelに変換し、印刷・ダウンロード機能を実現

以上がvueのデータバインディング方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。