コンポーネントコンポーネント
コンポーネントは何ですか
コンポーネントは、Vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張して、再利用可能なコードをカプセル化できます。
コンポーネントを作成する
グローバルコンポーネントを作成する
作成する最初の方法：
文法構造：Vue.component('组件名称',Vue.extend({template:'html结构'}))
Vue.extend（）：基本的なVueコンストラクターを使用して「サブクラス」を作成します。パラメータは、コンポーネントオプションを含むオブジェクトです。
y
使用法：
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件<h1>'
}))
//或者
var com1 = Vue.extend({
template:"<h1这是使用Vue.extend()创建组件h1>"
})
Vue.component('mycom1',com1);
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
注：これmycom1はカスタム作成されたグローバルコンポーネントの名前でtemplateあり、その中のテンプレート文字列はページにレンダリングするコンテンツです
作成する2番目の方法
文法構造：Vue.component('组件名称',{ template:'html结构' })
使用法：
<script>
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
この方法は、レンダリングする必要のあるhtml構造をVue.component（）の2番目のパラメーターとして直接渡すことです。この時点で、VueはデフォルトでVue.extend（）を自動的に呼び出します
作成する3番目の方法
文法構造：
<template id='tmp1'>
</template>
<script>
Vue.component('组件名称',{
template:'#tmp1'
})
</script>
使用法：
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
この方法は、レンダリングテンプレートを引き出して個別に書き込むことを除いて、上記の方法と似ています。
注意テンプレートテンプレートが外部で個別に記述されている場合は、コンテナをhtml要素でラップする必要があります。この場合、h1はdivでラップされます。
コンポーネントを使用する
我々はコンポーネント、役割を果たしているために、コンポーネントを作成した後、彼らは、コンポーネントを呼び出す必要があり
、呼び出し：書き込みに類似をhtml标签同じ
<组件名称></组件名称>か<组件名称/>
コンポーネントを呼び出す例として、上記の3つのメソッドを取り上げます。
<div id="app">
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件</h1>'
}))
//或者
// var com1 = Vue.extend({
// template:"<h1这是使用Vue.extend()创建组件h1>"
// })
// Vue.component('mycom1',com1)
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
結果は次のとおりです。
ローカルプライベートコンポーネントを作成する
プライベートコンポーネントを作成する方法は、以前に学習したプライベートフィルタを作成する方法と似ており、Vueインスタンスオブジェクトにcomponents属性を追加します。
文法構造：
最初の方法：
<script>
new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
'自定义组件名称':模板对象
}
}
})
</script>
または、テンプレートを構造に直接書き込むこともできます
components:{
自定义组件名称:{
template:"html结构"
}
}
2番目の方法：文字通りの方法でテンプレートオブジェクトを定義する
var tmp2 = {
template:'html结构'
}
<script>
new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
tmp2
}
}
})
</script>
プライベートコンポーネントの使用はグローバルコンポーネントの使用と同じで、直接呼び出すだけです