VueJS-コンポーネント

Vue Components 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'
});

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

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

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

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

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

例

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

で作成されたコンポーネントで .jsファイルに、HTMLコードを割り当てたテンプレートを追加しました。これはregistering a global component、これは、次のスクリプトに示すように、任意のvueインスタンスの一部にすることができます。

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

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

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

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

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

これは local registration コンポーネントは、作成された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上記のファイルには、オブジェクトを返す関数であるデータが追加されています。オブジェクトにはnameプロパティがあり、値 '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つのイベントを追加しました。イベントの詳細については、イベントの章で説明します。だから今のところ、マウスオーバーは呼び出しますchangename メソッドとマウスアウトの呼び出し originalname 方法。

その表示は以下のブラウザに表示されます。

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

マウスオーバーすると、最初のコンポーネントの名前が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 ブラウザにが表示されます。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved