Vue.jsのコンポーネントまとめです。
Vue.jsでインスタンスを繰り返して使用する際にはcomponent化する必要があります。
グローバル登録Vue.component (‘コンポーネントの名前 ‘ , {インスタンスの中身を記入 })
この時data:は関数にする。
<div id="app">
<my-component></my-component> //コンポーネントの名前のタグ
</div>Vue.component('my-component',{
data:function(){
return{
number:12
}
},
template:'<p>いいね{{number}}</p>'
})
new Vue({
el:'#app',
})下のパターンだと全てのmycomponentに適用されてしまう。
var data = {
number : 12
}
Vue.component('my-component',{
data:function(){
return data
},
template:'<p>いいね{{number}}<button @click = "increment">ナンバー+1</button></p>',
methods: {
increment: function(){
this.number += 1
}
}
})ローカルで登録 var 変数名 = {
オブジェクト中身
}
インスタンス内でcomponents: {
‘componentの名前’: 変数名
}
var component = {
data:function(){
return{
number : 12
}
},
template:'<p>いいね{{number}}<button @click = "incliment">ナンバー+1</button></p>',
methods: {
incliment: function(){
this.number += 1
}
}
}
new Vue({
el:'#app',
components:{
'my-component':component
}グローバルとローカルまとめ
var component = {
data: function(){ },
methods: {}
}
Vue.component('my-component',component)ローカル
new Vue ({
el:'#app1'
components:{
'my-component':component
}.vue内でimportされたコンポーネントは、そのまま使える
.js内でインポートされた場合は、render関数にコンパイルされたファイルが来る
なので、
・main.jsからApp.vueを読み込むとき→renderを使用
new Vue({
render: h => h(App),
}).$mount('#app')
・App.vueからHelloWorld.vueを読み込むとき→componentsを使用
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}そのため
new Vue ({
components: { App }
}).$mount(“#App”);
のような形は記述しない。