Vue でコンポーネントを作成する方法-jsチュートリアル-php.cn

Vue でコンポーネントを作成する方法

亚连

リリース： 2018-06-05 09:45:41

オリジナル

2425 人が閲覧しました

Vue でコンポーネントを作成する方法は何ですか?以下に、Vue でコンポーネントを作成する 2 つの方法の概要を紹介します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

コンポーネントを作成する 2 つの方法の概要

1. グローバル登録

2. ローカル登録

var child=Vue.extend({})
var parent=Vue.extend({})

ログイン後にコピー

Vue.extend() グローバルメソッドの生成のコンストラクターは、サブクラス

基本 Vue コンストラクターを使用して「サブクラス」を作成します。

このように書くのは非常に面倒です。そのため、vue は簡略化されました

コンポーネントを直接作成して登録するには、Vue.component() を使用します:

Vue.component(id,options) グローバルコンポーネントを登録するには、グローバルメソッドが使用されます

id は文字列型であり、名前です登録されたコンポーネントの

optionsはオブジェクトです

// 全局注册，my-component1是标签名称
Vue.component(&#39;my-component1&#39;,{
 template: &#39;<p>This is the first component!</p>&#39;
})
var vm1 = new Vue({
 el: &#39;#app1&#39;
})

ログイン後にコピー

Vue.component()の最初のパラメータはラベル名で、2番目のパラメータはオプションオブジェクトのテンプレート属性を使用します。コンポーネントテンプレートを定義します。

このメソッドを使用すると、Vue はバックグラウンドで Vue.extend() を自動的に呼び出します。

オプションオブジェクトのコンポーネント属性にローカル登録を実装します:

var vm2 = new Vue({
 el: &#39;#app2&#39;,
 components: {
  // 局部注册，my-component2是标签名称
  &#39;my-component2&#39;: {
   template: &#39;<p>This is the second component!</p>&#39;
  },
  // 局部注册，my-component3是标签名称
  &#39;my-component3&#39;: {
   template: &#39;<p>This is the third component!</p>&#39;
  }
 }
})

ログイン後にコピー

==ローカル登録はオプションオブジェクトに作成されます==

注: これはコンポーネントであり、複数のコンポーネントを定義できます。それ。

簡単に書くとこんな感じ

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

ログイン後にコピー

親コンポーネントを登録します。次に、親コンポーネントのオプションオブジェクトに子サブコンポーネントを登録します。子コンポーネントのタグを親コンポーネントのテンプレートに書き込みます。

ページのスタイル構造は

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

ログイン後にコピー

です注: ローカルに登録されたサブコンポーネントを単独で直接使用することはできません。

pにタグがぶら下がっている場合、エラーが報告されます

<p id=&#39;box&#39;>  
 <child></child>
</p>

ログイン後にコピー

以上、皆さんの参考になれば幸いです。

Angular で ng-alain に基づいて独自の選択コンポーネントを定義するにはどうすればよいですか?

Vueで監視オブジェクトと対応する値の変更を実装する方法

Vueが配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?

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