ホームページ > バックエンド開発 > PHPチュートリアル > vueのデータバインディング方法を詳しく解説

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

jacklove
リリース: 2023-03-31 17:04:01
オリジナル
2214 人が閲覧しました

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

parent.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<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

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

1

2

3

4

5

6

<template>

    <p>

        <p>parent:{{ msg }}</p>

        <children v-model="msg"></children>

    </p>

</template>

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<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 番目のタイプ: 応答イベント (@) を明示的に指定します。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<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>

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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 番目のパラメータは親コンポーネントに値を渡すことができるので、これは非常に便利です。

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


クリック後:


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

これは小さな例です:

親コンポーネント:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<strong><template>

    <p>

       <p>children2: {{ msg2 }}</p>

    </p>

</template>

<script>

    export default {

        name: &#39;children2&#39;,

        data () {

            return {

 

            }

        },

        props: [&#39;msg2&#39;]

    }

</script></strong>

ログイン後にコピー
ページは次のとおりです:

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

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

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

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

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

関連ラベル:
vue
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート