目次
序文：
完全なコンテンツについては、以下に注意してください。
学習まず、コンポーネントの基本的な使い方
シンプルなコンポーネントの使用例
コンポーネントは、次の名前を持つ再利用可能な Vue インスタンスです。
この例では、ボタン カウンターです。このコンポーネントを、新しい Vue で作成された Vue ルート インスタンスのカスタム要素として使用できます: <button-counter></button-counter>
templatein は、コンポーネントの DOM 要素のコンテンツです。
コンポーネントを使用した <button-counter></button-counter>
<div id="app">
<button-counter></button-counter>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:'<button @click="handle">点击了{
{count}}</button>',//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>2. グローバル コンポーネントとローカル コンポーネント
経由のグローバル登録 Vue.component
部分登録 components:{}
グローバル コンポーネント
グローバル変数と同様に、複数の vue インスタンスで使用できるグローバル コンポーネント。
メソッドを使用しVue.component('HelloWorld', {data(){}})て登録し、<button-counter></button-counter>呼び出しを直接使用します。HelloWorldはグローバル コンポーネントの名前で{data(){}}、定義済みのコンポーネント オブジェクトです。
<ハローワールド></ハローワールド>
<HelloWorld></HelloWorld> 経由の 2 番目のグローバル コンポーネント
レンダリングで実装
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('HelloWorld',{
data(){
return{
msg:"HelloWorld"
}
},
template:`<div>{
{msg}}</div>`
})
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:`
<div>
<button @click="handle">点击了{
{count}}</button>
<HelloWorld></HelloWorld>
</div>`,
//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>ローカル コンポーネント
ローカル コンポーネントは、現在の vue インスタンスによってマウントされたオブジェクトでのみ使用できます. ローカル変数と同様に、ブロック レベルのスコープがあります.
使用方法はグローバル変数と同じ、直接<hello-world></hello-world>呼び出しを使用
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
<hello-jerry></hello-jerry>
</div>
<script src="./vue.js"></script>
<script>
let HelloWorld ={
data:function(){
return{
msg:'HelloWorld'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloTom ={
data:function(){
return{
msg:'HelloTom'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloJerry ={
data:function(){
return{
msg:'HelloJerry'
}
},
template:`<div>{
{msg}}</div>`
}
const vm = new Vue({
el:"#app",
data:{
},
components:{
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jerry': HelloJerry,
}
})
</script>第三に、親コンポーネントと子コンポーネントの違い
上記のコードは 2 つのコンポーネント オブジェクトcpn1と を定義し、 component にローカル コンポーネントを登録しcpn2、登録されたコンポーネントをコンポーネントに使用してから、ローカル コンポーネントを vue インスタンスに登録し、vue インスタンスによってマウントされた div で呼び出します。、および親子コンポーネント関係を形成します。cpn2cpn1templatecpn1cpn2cpn2cpn2cpn1
注: コンポーネントは vue インスタンスであり、vue インスタンスの属性には、データ、メソッド、計算などのコンポーネントを含めることもできます。
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend({
template:`
<div>
<h2>标题1</h2>
<p>组件1</p>
</div>`
})
// 组件2中使用组件1
const cpn2 = Vue.extend({
template:`
<div>
<h2>标题2</h2>
<p>组件2</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpn1
}
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:cpn2
}
})
</script>