ホームページ >ウェブフロントエンド >jsチュートリアル >Vue でコンポーネントを作成する方法
Vue でコンポーネントを作成する方法
- 亚连オリジナル
- 2018-06-05 09:45:412471ブラウズ
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('my-component1',{
template: '<p>This is the first component!</p>'
})
var vm1 = new Vue({
el: '#app1'
})
Vue.component()の最初のパラメータはラベル名で、2番目のパラメータはオプションオブジェクトのテンプレート属性を使用します。コンポーネント テンプレートを定義します。 このメソッドを使用すると、Vue はバックグラウンドで Vue.extend() を自動的に呼び出します。
オプション オブジェクトのコンポーネント属性にローカル登録を実装します:
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注册，my-component2是标签名称
'my-component2': {
template: '<p>This is the second component!</p>'
},
// 局部注册，my-component3是标签名称
'my-component3': {
template: '<p>This is the third component!</p>'
}
}
})
==ローカル登録はオプション オブジェクトに作成されます==
注: これはコンポーネントであり、複数のコンポーネントを定義できます。それ 。
簡単に書くとこんな感じ
<body>
<p id='box'>
<parent>
</parent>
</p>
<script src='js/vue.js'></script>
<script>
Vue.component('parent',{
template:`<p><h1>我是父组件</h1><child></child></p>`,
components:{
'child':{
template:`<h1>我是子组件</h1>`
}
}
})
new Vue({
el:'#box'
})
</script>
</body>
親コンポーネントを登録します。次に、親コンポーネントのオプション オブジェクトに子サブコンポーネントを登録します。子コンポーネントのタグを親コンポーネントのテンプレートに書き込みます。
ページのスタイル構造は
<p> <h1>我是父组件</h1> <h1>我是子组件</h1> </p>
です 注: ローカルに登録されたサブコンポーネントを単独で直接使用することはできません。
pにタグがぶら下がっている場合、エラーが報告されます
<p id='box'> <child></child> </p>以上、皆さんの参考になれば幸いです。 関連記事:
Angular で ng-alain に基づいて独自の選択コンポーネントを定義するにはどうすればよいですか?
Vueが配列またはオブジェクトの変更を検出できない問題を解決するにはどうすればよいですか?
以上がVue でコンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。