ホームページ > ウェブフロントエンド > Vue.js > Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

青灯夜游
リリース: 2022-11-08 20:25:38
転載
1827 人が閲覧しました

Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?以下の記事では、父から息子、息子から父への方法を紹介していますので、ぜひ参考にしてください。

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

#1. 親コンポーネントを子コンポーネントに渡す

⭐⭐

    ##親コンポーネントは、props 属性を通じて子コンポーネントに渡されます。[関連する推奨事項:
  • vuejs ビデオ チュートリアルWeb フロントエンド開発]
  • 子コンポーネントコンポーネントが親コンポーネントに渡される: $emit を通じてイベントをトリガーする;

  • made by 森姐
## ここで、親コンポーネントに子によって表示する必要があるデータがあることがわかります。コンポーネントの場合、

props
コンポーネント間の通信を完了するには

プロパティを介してコンポーネント間の通信を完了するには

Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)
Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

##2. Props についての簡単な説明

⭐⭐ では、

Props

とは何ですか? ?
関数: 親コンポーネントによって渡されたプロパティを受け入れます

  • Props
  • は、コンポーネントにいくつかのカスタム属性を登録できることを意味します;
  • 親コンポーネントはこれらの属性 (属性) に値を割り当て、子コンポーネントは属性の名前を通じて対応する値を取得します;
  • 単一ファイル コンポーネントでは
  • スクリプト セットアップ#を使用します##,
props

defineProps() マクロを使用して次を宣言できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script&gt; const props = defineProps([&amp;#39;foo&amp;#39;]) console.log(props.foo) &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>1) 配列型

# は使用されません

script setup のコンポーネントでは、props

オプションを使用して

prop を宣言できます:

1

2

3

4

5

6

7

export default {

  props: ['foo'],

  setup(props) {

    // setup() 接收 props 作为第一个参数

    console.log(props.foo)

  }

}

ログイン後にコピー
例、オブジェクトの使用構文

App.vue

は、整数 props
  • 1

    2

    3

    <template>

        <show-info></show-info>

    </template>

    ログイン後にコピー
    # で定義されたコンポーネントと属性を使用します。 #showInfo.vue
  • Subcomponent
  • 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

     export default {

            props:{

                name :{

                    type:String,

                    default:"我是默认值name"

                },

                height:{

                    type:Number,

                    default:2

                }

            }

        }

    ログイン後にコピー

    Also:それでは、どのような型が考えられるのでしょうか?

    #文字列
数値


ブール値

    配列
  • オブジェクト
  • 日付
  • Function
  • Symbol
  • 2) オブジェクト型
  • object

の形式で宣言されます。 props (これは非常に一般的に使用されます)

Use

script setup

1

2

3

4

defineProps({

  title: String,

  likes: Number

})

ログイン後にコピー
non-script setup

1

2

3

4

5

6

export default {

  props: {

    title: String,

    likes: Number

  }

}

ログイン後にコピー
3. 子コンポーネントは親コンポーネントに渡されます

⭐⭐

子コンポーネントは親コンポーネントに渡され、$ を通じてイベントがトリガーされます放出 # 子コンポーネントは親コンポーネントにコンテンツを渡します:


子コンポーネントで何らかのイベントが発生すると、コンポーネントの場合、親コンポーネントはコンテンツを切り替える必要があります;

子コンポーネントに親コンポーネントに渡したいコンテンツがある場合; Vue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)

$emit("add", count )

最初のパラメータはカスタマイズされたイベント名で、2 番目のパラメータは渡されたパラメータです。
  • ⭐⭐
  • カウンターケースを考えてください。
ここには 2 つのパラメータがあります。サブコンポーネントと親コンポーネント


サブコンポーネントは、場合によってトリガーされるイベントの名前で定義されます

親コンポーネントで、監視するイベントの名前を渡しますv-on (構文シュガー @) の形式で、対応するメソッドにバインドします。
#最後に、子コンポーネントでイベントが発生すると、イベント名に従って対応するイベントがトリガーされます

  • 1) 親コンポーネント
  • App.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

25

26

27

28

29

30

31

32

<template>

    <div>

    <h2>当前计数:{{counter}}</h2>

    <!-- 1.自定义add-counter 并且监听内部的add事件 -->

   <add-counter></add-counter>  

   <!-- 2.自定义su-counter组件,监听内部的sub事件 -->

   <sub-counter></sub-counter>

   </div>

</template>

<script>

import AddCounter from &#39;./AddCounter.vue&#39;

import SubCounter from &#39;./SubCounter.vue&#39;

    export default {

  components: {

    AddCounter,

    SubCounter

 },

    data() {

        return {

            counter:0

        }

    },

    methods:{

        addBtnClick(count) {

            this.counter += count

        },

        subBtnClick(count) {

            this.counter -= count

        }

    }

}

</script>

ログイン後にコピー

2) サブコンポーネント 1AddCounter .vue

  • ここで定義されているのはカウンターの加算演算です
  • サブコンポーネントイベントがトリガーされた後、これを通して $emit イベントを発行する方法
  • 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    <template>

        <div>

            <button>+1</button>

            <button>+5</button>

            <button>+10</button>

        </div>

    </template>

    <script>

        export default {

            methods:{

                btnClick(count) {

                    // 让子组件发出去一个自定义事件

                    // 第一个参数自定义的事件名称,第二个参数是传递的参数

                    this.$emit("add",count)

                }

            }

        }

    </script>

    ログイン後にコピー
  • 3) サブコンポーネント 2
SubCounter.vue

ここで定義されているのはカウンターのデクリメント操作です

サブコンポーネントのイベントトリガー その後 # を通じてイベントが発行されます##this.$emit


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<template>

    <div>

        <button>-1</button>

        <button>-5</button>

        <button>-10</button>

    </div>

</template>

<script>

    export default {

        // 1.emits数组语法

       emits:["addd"],

       methods:{

        btnClick(count) {

            this.$emit("sub",count)

        }

       }

    }

</script>

ログイン後にコピー
このケースは非常に古典的なものなので、何度でも考えることができます~

(学習ビデオの共有: プログラミングの基本ビデオ

)

以上がVue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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