VueJS-コンポーネント

Vueコンポーネント*は、HTMLで再利用できるカスタム要素を作成するVueJSの重要な機能の1つです。

サンプルを使用してコンポーネントを作成してみましょう。これにより、コンポーネントがVueJSでどのように機能するかをより深く理解できます。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

*vue_component.js*

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

lファイルでは、ID component_test と component_test1 の2つのdivを作成しました。上記の .js ファイルでは、2つのVueインスタンスがdiv idで作成されます。両方のビューインスタンスで使用される共通コンポーネントを作成しました。

コンポーネントを作成するための構文は次のとおりです。

Vue.component('nameofthecomponent',{//options});

コンポーネントが作成されると、コンポーネントの名前がカスタム要素になり、作成されたVueインスタンス要素で同じ要素を使用できます。 IDが component_test および component_test1 のdiv内。

*.js* ファイルでは、テストコンポーネントをコンポーネントの名前として使用しており、同じ名前がdiv内のカスタム要素として使用されています。

例

<div id = "component_test">
   <testcomponent></testcomponent>
</div>
<div id = "component_test1">
   <testcomponent></testcomponent>
</div>

*.js* ファイルで作成されたコンポーネントに、HTMLコードを割り当てたテンプレートを追加しました。 これは、グローバルコンポーネントを登録する方法です*。これは、次のスクリプトに示すように、vueインスタンスの一部にすることができます。

Vue.component('testcomponent',{
   template : '<div><h1>This is coming from component</h1></div>'
});

実行時に、同じことがブラウザに反映されます。

グローバルコンポーネント

コンポーネントには、カスタム要素タグ、つまり <testcomponent> </testcomponent> 。ただし、ブラウザで同じものを検査しても、次のスクリーンショットに示すように、テンプレートにプレーンHTMLのカスタムタグが存在することはわかりません。

TestComponent

また、次のスクリプトに示すように、コンポーネントを直接vueインスタンスの一部にしました。

var vm = new Vue({
   el: '#component_test',
   components:{
      'testcomponent': {
         template : '<div><h1>This is coming from component</h1></div>'
      }
   }
});

これは*ローカル登録*と呼ばれ、コンポーネントは作成されたvueインスタンスのみの一部になります。

これまで、基本的なオプションを備えた基本的なコンポーネントを見てきました。次に、データやメソッドなどのオプションを追加します。 Vueインスタンスにデータとメソッドがあるように、コンポーネントも同じものを共有します。したがって、データとメソッドで既に見たコードを拡張します。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <div id = "component_test1">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

*vue_component.js*

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
   data: function() {
      return {
         name : "Ria"
      }
   },
   methods:{
      changename : function() {
         this.name = "Ben";
      },
      originalname: function() {
         this.name = "Ria";
      }
   }
});
var vm = new Vue({
   el: '#component_test'
});
var vm1 = new Vue({
   el: '#component_test1'
});

上記の .js ファイルに、オブジェクトを返す関数であるデータを追加しました。オブジェクトには名前プロパティがあり、値「Ria」が割り当てられています。これは、次のテンプレートで使用されます。

template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

データをコンポーネントの関数として持っているにもかかわらず、直接Vueインスタンスで使用するのと同じ方法でそのプロパティを使用できます。また、changenameとoriginalnameの2つのメソッドが追加されています。 changenameでは、nameプロパティを変更しています。originalnameでは、元の名前にリセットしています。

また、divにmouseoverとmouseoutの2つのイベントを追加しました。イベントの詳細については、イベントの章で説明します。そのため、現時点では、mouseoverは changename メソッドを呼び出し、mouseoutは originalname メソッドを呼び出します。

同じ表示が次のブラウザに表示されます。

OriginalName

上記のブラウザに見られるように、データプロパティで割り当てられた名前が表示されますが、これは同じ名前です。また、divのmouseoverイベントとmouseoutを割り当てました。マウスオーバーとマウスアウトで何が起こるか見てみましょう。

マウスオーバー

マウスオーバーすると、最初のコンポーネントの名前がBenに変更されますが、2番目のコンポーネントはそのまま残ります。これは、データコンポーネントが関数であり、オブジェクトを返すためです。したがって、ある場所で変更されても、他の場合は同じものは上書きされません。

動的コンポーネント

動的コンポーネントは、キーワード <component> </component> を使用して作成され、次の例に示すようにプロパティを使用してバインドされます。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

出力

動的コンポーネント

動的コンポーネントは、次の構文を使用して作成されます。

<component v-bind:is = "view"></component>

v-bind：is =” view”があり、それに値ビューが割り当てられています。ビューは、Vueインスタンスで次のように定義されます。

var vm = new Vue({
   el: '#databinding',
   data: {
      view: 'component1'
   },
   components: {
      'component1': {
         template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
      }
   }
});

実行されると、テンプレート Dynamic Component がブラウザに表示されます。

Vuejs-components

目次

VueJS-コンポーネント

例

例

例

動的コンポーネント

例

出力