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

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

coldplay.xixi

リリース： 2020-11-12 14:24:52

オリジナル

5917 人が閲覧しました

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

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

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

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

コンポーネントとは

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

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

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

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

Vue.component(&#39;todo-item&#39;,{
  props:[&#39;grocery&#39;],
  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>

ログイン後にコピー

var data = { counter: 0 }
Vue.component(&#39;simple-counter&#39;, {
 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 つ増加します。

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

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

ログイン後にコピー

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