思考のコンポーネント
ページの処理ロジックは、フォローアップするために管理し、拡大を助長されていません、非常に複雑になるそれらに対処するために一緒に入れて。
ページが小さい機能ブロックに分割した場合のページの管理とメンテナンスが非常に簡単になった後、各機能ブロックは、その内容を実現しています。
コンポーネントを登録するための基本的な手順
コンポーネントビルダー作成1.
2.登録コンポーネント
3.コンポーネントを
//创建组件构造器对象
const cpnC = Vue.extend({
template:`
<div>
<h2>hello world</h2>
<p>hi world</p>
</div>
`
})
//注册组件
Vue.component('my-cpn',cpnC)
//使用组件
<div id="app">
<my-cpn></my-cpn>
</div>
グローバル・コンポーネント
ヴューの複数のインスタンスで使用することができます
Vue.component('my-cpn',cpnC)
地方議会
これは、現在のインスタンスにのみ使用することができヴュー
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
mycpn: cpnC
}
});
父と息子のコンポーネント
<script>
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈</p>
</div>
`
})
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容2，呵呵呵</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
cpn2: cpnC2
}
});
</script>
部品とアセンブリ間の階層関係があります
シンタックスシュガーグローバルコンポーネントをサインアップ
Vue.component('cpn1',{
template:`
<div>
<h2>我是标题</h2>
<p>我是内容，呵呵呵</p>
</div>
`
})
ローカルコンポーネントシンタックスシュガーをサイン
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components:{
'cpn2' :{
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容2，呵呵呵</p>
</div>
`
}
}
});
延長呼び出しのステップを排除
コンポーネントテンプレートは、デタッチ
1.スクリプトタグ、 type="text/x-template"
<script type="text/x-template" id="cpn">
<div>
<h2>哈哈哈哈哈</h2>
<p>歪比歪比</p>
</div>
</script>
<script>
Vue.component('cpn',{
template: '#cpn'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
1.テンプレートラベル
<template id='cpn'>
<div>
<h2>哈哈哈哈哈</h2>
<p>歪比歪比</p>
</div>
</template>
<script>
Vue.component('cpn',{
template: '#cpn'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
コンポーネントは、データVueのインスタンスにアクセスすることができますか？
できませんそして、あなたがアクセスすることができた場合でも、インスタンスVueの上のすべてのデータならば、Vueの例は非常に肥大化します
Vueのコンポーネントは、データを保存するための独自の場所を持っている必要があります
<template id='cpn'>
<div>
<h2>{{title}}</h2>
<p>歪比歪比</p>
</div>
</template>
<script>
Vue.component('cpn',{
template: '#cpn',
data(){
return {
title: 'abc'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
データ（）{}