「コンポーネントの親子関係」とは？
コンポーネントのテンプレートで他のコンポーネントを使うことを、コンポーネントの親子関係と呼びます。
Vue.jsでは親から子へしかデータを受け渡すことができません。子コンポーネントから親コンポーネントのデータを参照することもできません。
例
例えば、下記のようなソースになります。親コンポーネントのテンプレートの中で、子コンポーネントを使っています。
「comp-parent」が親コンポーネントで、「comp-child」が子コンポーネントになります。
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <comp-parent></comp-parent> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> Vue.component('comp-parent', { template: '<div><h1>componentの親</h1><comp-child /></div>' }) Vue.component('comp-child', { template: '<p>componentの子</p>' }) new Vue({ el: '#app' }) </script> </body> </html> |
実行結果
親から子へのデータの受け渡し
通常、コンポーネント間での通信はできないものですが、propsを使えば、親の属性に指定した値を、子に渡すことができます。渡す際は親コンポーネントの属性（v-bind経由）で指定します。
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <comp-parent></comp-parent> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> Vue.component('comp-parent', { template: '<div><h1>componentの親</h1><comp-child val="たけし" /></div>' }) Vue.component('comp-child', { template: '<p>componentの子：{{ val }}</p>', //親から受け取る属性名 props: ['val'] }) new Vue({ el: '#app' }) </script> </body> </html> |
実行例
子から親のイベントを呼ぶには？
下記の例は、子のクリックイベントをトリガーにして、親で定義されているメソッドを呼ぶ場合のサンプルになります。
|
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 33 34 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <comp-child v-on:childevent="testMethod"></comp-child> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> Vue.component('comp-child', { template: '<button v-on:click="handleClick">イベント発火</button>', methods: { handleClick: function () { this.$emit('childevent') } } }) new Vue({ el: '#app', methods: { testMethod: function () { alert('イベントが発生') } } }) </script> </body> </html> |
カスタムイベント
この例で言えば、「v-on:childevent」という自作のイベントのことです。
$emit
インスタンスメソッドの一つで、コンポーネントに紐づいているイベントを明示的に発火させるメソッドになります。jQueryで言えば、triggerと同じような役割になります。
このサンプルでは、ボタンが押されたら親が子のイベントを検知して、アラートを表示することができます。
この記事へのコメントはありません。