组件化
组件是Vue.js最强大的功能之一
- 可以扩展HTML元素,封装可重用代码。
- 在较高层面上是自定义的元素,Vue.js的编译器为它添加特殊功能。
- 在有些情况下也可以是原生HTML元素的形式,以is特性扩展。
组件创建
- 调用 Vue.extend(),创建名为myComp的组件, template定义模板的标签,模板的内容需写在该标签下。
var myComp = Vue.extend({ template: '<div>只是我的组件</div>' })
<template>
标签创建,需要加上id属性。<template id="myComp"> <div>这是template标签构建的组件</div> </template>
<script>
标签创建,需加id属性,同时还得加type="text/x-template"不执行编译里面的代码<script type="text/x-template" id="myComl"> <div>这是script标签构建的组件</div> </script>
组件注册
- 全局注册
1.调用Vue.extend(), 创建名为myComp的组件全局注册
2.template及script标签构建的组件全局注册Vue.component('my-comp',myComp)
Vue.component('my-comp',{ template: '#myComp' })
- 局部注册
1.调用Vue.extend(), 创建名为myComp的组件局部注册(只能在注册该组件的实例中使用,一处注册,一处使用)
2.template及script标签构建的组件局部注册。var app = new Vue({ el: '#app', components: { 'my-comp': myComp } })
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组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
// 定义一个混入对象
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"}
}
})