Vue.js

Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?父から息子へ、息子から父へと受け継ぐ方法についてお話しましょう。

Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?父から息子へ、息子から父へと受け継ぐ方法についてお話しましょう。

青灯夜游

Nov 30, 2021 pm 07:41 PM

vue親子コンポーネントの通信コンポーネント通信

Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?次の記事では、Vue の親コンポーネントと子コンポーネント間の通信を理解し、親が子に値を渡す方法、子が親に値を渡す方法を紹介しますので、皆様の参考になれば幸いです。

Vue 親子コンポーネント

親子コンポーネントとは何ですか?

コンポーネントに別のコンポーネントを導入し、導入されたコンポーネントをサブコンポーネントと呼びます。Vue はモジュール化されているため、共通部分は別のモジュールに抽出され、ページのコンテンツはすべてサブコンポーネントになります。 vue ファイルに記述されると、モジュール性により 2 つのモジュール間の通信の問題が避けられず、その際、モジュール (コンポーネント) 間のデータ転送の問題が発生します。 [関連する推奨事項: "vue.js チュートリアル "]

Vue の親子コンポーネントの通信

vue では、あるコンポーネントが別のコンポーネントまたはメソッドのデータを使用することがよくあります。現時点では、親コンポーネントと子コンポーネントの間に通信の問題があります

Vue の親から子への通信

#1。まずコードを見て、以下で説明します

<body>
//父组件
<div id="app">
    <cpn3 :ctitle="title"></cpn3>
</div>
//子组件
<template id="cpn3">
    <div>
        <h1 id="ctitle">{{ctitle}}</h1>
        <p>orange</p>
    </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
                type: String,
                default () {
                    return {}
                }
            }
        }
    })
	//父组件
    const app = new Vue({
        el: "#app",
        data: {
            title: &#39;orange&#39;
        },
        methods: {},

    })
</script>
</body>

説明:
1. 最初に基本的なテンプレート分離コンポーネントを記述します

2. オブジェクトモードでサブコンポーネントに props 属性を追加します. props には、渡す必要があるパラメーターを記述できます。コードはより明確です、

    //子组件
    Vue.component("cpn3", {
        template: "#cpn3",
        // 组件里的data是一个函数，必须要返回一个对象，变量写在返回对象里
        props: {
            ctitle: {
            //参数也使用对象形式，type传类型  default函数，是在找不到参数时返回一个值显示
                type: String,
                default () {
                    return {}
                }
            }
        }
    })

2. 次に、必要な属性を親コンポーネント

//父组件
    const app = new Vue({
        el: "#app",
        data: {
        //这里的title就是要传入子组件的属性  在父组件中定义
            title: &#39;orange&#39;
        },
        methods: {},

    })

3 に追加します。2 つのパラメーターを親コンポーネント

 <div id="app">
	//可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了
    <cpn3 :ctitle="title"></cpn3>
</div>

## にバインドします#4. 最後に、サブコンポーネントで、サブコンポーネント

//子组件
<template id="cpn3">
    <div>
    //这里的属性名为ctitle
        <h1 id="ctitle">{{ctitle}}</h1>
    </div>
</template>

Vue Pass from Son toparent

1 で定義されたプロパティ名を使用します。子コンポーネントから親コンポーネントへの受け渡しとは、サブコンポーネント内容を親コンポーネントに渡し、親コンポーネントがいつでも子コンポーネントのデータを利用できるようにする使用方法はカスタム関数です。

#1. まず、淘宝網の模倣サイドバー製品を作成しましょう。マウスを上に移動して、コンテンツ製品ケースを表示します。

2. 上記を取り上げます。図を例に、コンポーネントの子から父への伝達について話しましょう

2.1 サブコンポーネントと親コンポーネントを分けて、1 つずつ説明していきます。サブコンポーネントコード

<!-- 子组件 -->
<template id="cpn">
    <div>
        <h1 id="ctitle">{{ctitle}}</h1>
        <button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>
    </div>
</template>
<script>
Vue.component("cpn", {
        template: &#39;#cpn&#39;,
        //父传子 props   
        props: {
            ctitle: {
                type: String,
                //找不到数据时
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                list: [{
                    id: &#39;phone&#39;,
                    name: &#39;手机&#39;
                }, {
                    id: &#39;tv&#39;,
                    name: &#39;电视&#39;
                }, {
                    id: &#39;p&#39;,
                    name: &#39;家电&#39;
                }, {
                    id: &#39;computer&#39;,
                    name: &#39;电脑&#39;
                }, ]
            }
        },
        //子传父 自定义事件
        methods: {
            // 自定义事件
            goodsclick(item) {
                this.$emit(&#39;itemclick&#39;, item)
            }
        }
    })
    </script>

説明: サブコンポーネントはコンポーネント (html) を記述してそれをラップするもので、いつでも使用できます。これは HTML と同等です。、パッケージ化されただけです (この理解で問題ありません)

1. サブコンポーネントには、vue のようなデータ、メソッド、属性があります。したがって、データに配列を書き込み、v-forを使用してトラバースしてボタンを生成します通常の記述と何ら変わりはなく、関数を記述し、クリックイベントをバインドし、配列で渡されたオブジェクトである項目を関数

<button v-for="item in list" @click="goodsclick(item)">{{item.name}}</button>

2 に渡します。重要なステップが来ます。つまり、バインドしたクリックイベント関数で、カスタム関数を親コンポーネントに送信します。つまり、親コンポーネントに送信します。これは、子コンポーネントが作成されるときのもので、上の図に示すように、子コンポーネントのスタイルです。

2. 次に、親コンポーネントがカスタムイベントをどのように受け取るかについて説明します。子コンポーネント Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?父から息子へ、息子から父へと受け継ぐ方法についてお話しましょう。

methods: {
            // 自定义事件
            goodsclick(item) {
            //itemclick就是自定义函数，并且将item也传过去给父组件
                this.$emit(&#39;itemclick&#39;, item)
            }
        }

説明: サブコンポーネントを作成した後、それを呼び出す必要があります。呼び出しはラベルとしてのコンポーネント名です。ここに

<!-- 父组件 -->
<div id="app">
    <cpn :ctitle="title" @itemclick="cpnclick"></cpn>
</div>
<script>
//父组件    
    const app = new Vue({
        el: "#app",
        data: {
            title: "title",
        },
        methods: {
            cpnclick(item) {
                console.log("cpnclick", item);
            }
        }
    })
</script>

関数を記述します親コンポーネントで、サブコンポーネントから渡された自己をバインドします。サブコンポーネントが正常にバインドされるようにイベントを定義します。これにより、サブコンポーネントが親コンポーネントにデータを転送します。終了この章

プログラミング関連の知識については、

プログラミング入門

をご覧ください。！

以上がVue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?父から息子へ、息子から父へと受け継ぐ方法についてお話しましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Vue.jsの関数：フロントエンドでのユーザーエクスペリエンスの強化Apr 19, 2025 am 12:13 AM

Vue.jsは複数の機能を介してユーザーエクスペリエンスを改善します。1。レスポンシブシステムは、リアルタイムデータフィードバックを実現します。 2。コンポーネント開発により、コードの再利用性が向上します。 3. Vuerouterはスムーズなナビゲーションを提供します。 4.動的データの結合および遷移アニメーションは、相互作用効果を強化します。 5.エラー処理メカニズムにより、ユーザーのフィードバックが保証されます。 6.パフォーマンスの最適化とベストプラクティスは、アプリケーションのパフォーマンスを改善します。

Vue.js：Web開発におけるその役割を定義しますApr 18, 2025 am 12:07 AM

Web開発におけるVue.jsの役割は、開発プロセスを簡素化し、効率を向上させるプログレッシブJavaScriptフレームワークとして機能することです。 1）開発者は、レスポンシブデータのバインディングとコンポーネント開発を通じてビジネスロジックに集中できるようになります。 2）VUE.JSの作業原則は、パフォーマンスを最適化するためにレスポンシブシステムと仮想DOMに依存しています。 3）実際のプロジェクトでは、VUEXを使用してグローバルな状態を管理し、データの応答性を最適化することが一般的な慣行です。

Vue.jsの理解：主にフロントエンドフレームワークApr 17, 2025 am 12:20 AM

Vue.jsは、2014年にYou YuxiがリリースしたプログレッシブJavaScriptフレームワークで、ユーザーインターフェイスを構築します。その中心的な利点には、次のものが含まれます。1。レスポンシブデータバインディング、データ変更の自動更新ビュー。 2。コンポーネントの開発では、UIは独立した再利用可能なコンポーネントに分割できます。

Netflixのフロントエンド：React（またはVue）の例とアプリケーションApr 16, 2025 am 12:08 AM

Netflixは、Reactをフロントエンドフレームワークとして使用します。 1）Reactのコンポーネント開発モデルと強力なエコシステムが、Netflixがそれを選択した主な理由です。 2）コンポーネント化により、Netflixは複雑なインターフェイスをビデオプレーヤー、推奨リスト、ユーザーコメントなどの管理可能なチャンクに分割します。 3）Reactの仮想DOMおよびコンポーネントライフサイクルは、レンダリング効率とユーザーインタラクション管理を最適化します。

フロントエンドの風景：Netflixが選択にアプローチした方法Apr 15, 2025 am 12:13 AM

Netflixのフロントエンドテクノロジーでの選択は、主にパフォーマンスの最適化、スケーラビリティ、ユーザーエクスペリエンスの3つの側面に焦点を当てています。 1。パフォーマンスの最適化：Netflixは、Reactをメインフレームワークとして選択し、SpeedCurveやBoomerangなどのツールを開発して、ユーザーエクスペリエンスを監視および最適化しました。 2。スケーラビリティ：マイクロフロントエンドアーキテクチャを採用し、アプリケーションを独立したモジュールに分割し、開発効率とシステムのスケーラビリティを改善します。 3.ユーザーエクスペリエンス：Netflixは、Material-UIコンポーネントライブラリを使用して、A/Bテストとユーザーフィードバックを介してインターフェイスを継続的に最適化して、一貫性と美学を確保します。

React vs. Vue：Netflixはどのフレームワークを使用していますか？Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、