vue.jsでコンポーネントを使用する方法

vue.js でコンポーネントを使用する方法: 1. HTML 要素を拡張し、再利用可能なコードをカプセル化する; 2. コンポーネントはカスタム要素であり、[Vue.js] のコンパイラはそれに特別な関数を追加します; 3.コンポーネントは、is 属性で拡張されたネイティブ HTML 要素の形式にすることもできます。

【おすすめ関連記事：vue.js】

vue.js でコンポーネントを使用する方法:

コンポーネントとは

規則による, Vue 公式 Web サイトからの一文を引用:

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。

コンポーネント コンポーネントの登録

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

Vue.component('todo-item',{
  props:['grocery'],
  template:&#39;<li>{{grocery.text}}</li>&#39;
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})

<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

ローカル登録:

var Child = {
 template: &#39;<div>A custom component!</div>&#39;
}
new Vue({
 // ...
 components: {
  // <my-component> 将只在父模板可用
  &#39;my-component&#39;: Child
 }
})

DOM テンプレートの解析手順

コンポーネントには、特定の HTML タグの下でいくつかの制限が適用されます。

たとえば、コード内の table タグの下のコンポーネントは無効です。

<table>
 <my-row>...</my-row>
</table>

回避策は、is 属性経由でコンポーネントを使用することです

<table>
 <tr is="my-row"></tr>
</table>

次のいずれかのソースからの文字列テンプレートを使用する場合、制限されないことに注意してください

<script type="text/x-template">

JavaScript インライン テンプレート文字列

#.vueComponent

data は関数を使用して、複数のコンポーネントが相互に影響を与えることを回避します

html

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

js

var data = { counter: 0 }
Vue.component('simple-counter', {
 template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,
 data: function () {
  return data
 }
})
new Vue({
 el: &#39;#example-2&#39;
})

上記のように、div の下に 3 つのコンポーネントがあり、各コンポーネントはカウンターを共有します。いずれかのコンポーネントをクリックすると、すべてのコンポーネントのカウンタが 1 つ増加します。

解決策は次のとおりです。

js

Vue.component('simple-counter', {
 template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,
 data: function () {
  return {counter:0}
 }
})
new Vue({
 el: &#39;#example-2&#39;
})

このようにして、各コンポーネントが生成された後、独自の専用カウンターが作成されます。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がvue.jsでコンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。