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

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

Vue 親子コンポーネント

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

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

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

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

Vue の親から子への通信

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

 //父组件 
  
 //子组件    

説明:
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: 'orange' }, methods: {}, })

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

 //可以理解为将父组件中title 赋值给 ctitle，这样子组件就可以使用父组件的data属性了  

//子组件 

Vue Pass from Son toparent

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

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

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

{{item.name}}

2. 次に、親コンポーネントがカスタム イベントをどのように受け取るかについて説明します。子コンポーネント

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

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

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

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

をご覧ください。 ！

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