2.2 Vueコンポーネント化の詳細
15770 ワード
コンポーネント化
コンポーネントはVueである.jsの最も強力な機能の一つはHTML要素を拡張し、再利用可能なコードをカプセル化することができる. はより高いレベルでカスタマイズされた要素であり、Vue.jsのコンパイラは特殊な機能を追加します. は、場合によっては、is特性で拡張されたオリジナルHTML要素の形式であってもよい.
コンポーネントの作成 Vueを呼び出す.extend()は、myCompというコンポーネントを作成し、templateはテンプレートのラベルを定義し、テンプレートの内容はこのラベルの下に書く必要があります.
コンポーネントはVueである.jsの最も強力な機能の一つ
コンポーネントの作成
var myComp = Vue.extend({
template: ' '
})
， id 。 <template id="myComp">
<div> template div>
template>
<script type="text/x-template" id="myComl">
<div> script </div>
script>
コンポーネントの グローバル 1.Vueを び す.extend()は、myCompというコンポーネントのグローバル Vue.component('my-comp',myComp)
を する.templateおよびscriptラベル コンポーネントグローバル Vue.component('my-comp',{
template: '#myComp'
})
ローカル 1.Vueを び す.extend()は、myCompという のコンポーネントのローカル を する(コンポーネントを したインスタンスでのみ でき、1つは 、1つは できる)var app = new Vue({
el: '#app',
components: {
'my-comp': myComp
}
})
.templateおよびscriptラベルで されたコンポーネントのローカル . var app = new Vue({
el: '#app',
components: {
'my-comp': {
template: '#myComp'
}
}
})
の アクセスルートインスタンス//
this.$root.foo
//
this.$root.foo = 2
コンポーネントインスタンス<google-map>
<google-map-region v-bind:shape="cityBoundaries">
<google-map-markers v-bind:places="iceCreamShops">
google-map-markers>
google-map-region>
google-map>
this.$parent.XXX
にアクセスは、サブコンポーネントインスタンスまたはサブ // ref ID
<base-input ref="usernameInput">base-input>
// usernameInput
this.$refs.usernameInput
にアクセスする. //
provide: function () {
return {
getMap: this.getMap
}
}
inject: ['getMap']
(mixin)
(mixin)
ミキシング(mixin)は、Vueコンポーネントの な を するための に な を する. オブジェクトには、 のコンポーネントオプションを めることができます.コンポーネントがオブジェクトの を すると、すべての オブジェクトのオプションがコンポーネント のオプションにブレンド(Blend)されます.//
var myMixin = {
created:function () {
this.hello()
},
methods: {
hello:function () {
console.log('hello from mixin!')
}
}
}
//
var Component = Vue.extend({
mixins:[myMixin]
})
var component = new Component() // => "hello from mixin!"
mixinグローバル
してもグローバル が です. には に してください.グローバルブレンドを すると、 で されるVueインスタンスに します. に すると、カスタムオプションに ロジックを できます.// ‘myOption’
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if(myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
mixinオプションのマージ
コンポーネントとブレンドオブジェクトに じ のオプションが まれている 、これらのオプションは な でマージされます.var mixin = {
data: function () {
return {message:'hello',foo:'abc'}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {message:'goodbye',bar:'def'}
},
created: function () {
console.log(this.$data)
// => {message:"goodbye",foo:"abc",bar:"def"}
}
})