1.使用组件
//组件命名规则：全小写-分隔(kebab-case)
//注册一个全局组件
Vue.component('my-component', {});
//注册一个局部组件
new Vue({
components:{
'my-component':{}
}
});
<table>
<!-- ul,ol,table,select标签限制了被包裹元素的类型,如果使用自定义组件会有问题 -->
<!-- my-row></my-row -->
<!-- 变通方案使用is属性 -->
<tr is="my-row"></tr>
</table>
为什么component的data被设计为一个函数？
嘻嘻...你猜...
2.父子组件通信
父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息
组件实例作用域是孤立的，不应该在子组件内部直接引用父组件数据，应该通过props选项访问
<!-- myMessage属性camelCase在html中要写成kebab-case -->
<!-- my-message绑定静态字符串 -->
<my-component my-message="hello"></my-component>
<!-- :my-message动态绑定父组件变量,当父组件数据变化,会传导给子组件 -->
<my-component :my-message="message"></my-component>
Vue.component('my-component', {
props:['myMessage'],
template:'<span>{{myMessage}}</span>'
});
var app = new Vue({
el: "#app",
data:{
message:"from parent"
}
});
props是单向绑定，父组件属性变化会传到给子组件，但不会反过来，不应该在子组件内部直接改变prop值
<my-component :init="init" :size="size"></my-component>
Vue.component('my-component', {
props: ['init', 'size'],
template: '<span>{{myInit}}{{mySize}}</span>',
//组件内部改变prop的2种方案：
//1.prop作为值初始值传入,赋值给组件局部变量
data: function () {
return {myInit: this.init}
},
//2.prop作为初始值传入,由组件处理为其他数据输出
computed: {
mySize: function () {
return this.size.toLowerCase();
}
}
});
var app = new Vue({
el: "#app",
data: {
init: 0,
size: "six"
}
});
props如果是引用类型，在子组件内部改变其属性会影响父组件
可为组件props指定验证规则
<my-component :pro-a="proA" :pro-b="proB" :pro-c="proC" :pro-d="proD"></my-component>
Vue.component('my-component', {
props: {
//String,Number,Boolean,Function,Object,Array,Symbol,null(任意类型)
proA: Number,
//多种类型
proB: [String, Number],
proC: {
type: String,
//设置默认值
default: "66",
//设置必填验证
required: true
},
proD: {
type: Number,
//自定义默认值
default: function () {
return 6;
},
//自定义验证规则
validator: function (value) {
return value >= 6;
}
}
},
template: '<span></span>'
});
var app = new Vue({
el: "#app",
data: {
//报错
proA: "6",
//报错
proB: [],
//报错
proC: null,
//报错
proD: 5
}
});
3.自定义事件
子组件通过自定义事件系统于父组件通信
- $on(eventName)监听事件
- $emit(eventName)触发事件
<!-- 父组件可直接使用v-on监听子组件触发的自定义事件 -->
<my-button @myevent="addTotal"></my-button>
<!-- 父组件监听子组件根元素上的原生事件,使用.native修饰符 -->
<my-button @click.native="addTotal"></my-button>
Vue.component('my-button', {
template: '<button @click="addCount">{{count}}</button>',
data: function () {
return {
count: 0
}
},
methods: {
addCount: function () {
this.count++;
//触发自定义事件
this.$emit('myevent');
}
}
});
var app = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
addTotal: function () {
this.total++;
}
}
});
v-model语法糖实际会转化为：:value="value" @input="value=$event.target.value"，因此，自定义事件可以用来创建自定义表单输入组件，使用v-model实现数据双向绑定
{{currency}}
<!--my-currency :value="currency" @input="currency = $event.target.value"></my-currency-->
<my-currency v-model="currency"></my-currency>
Vue.component('my-currency', {
props: ["value"],
template: '<div><input ref="myInput" :value="value" @input="updateValue"/></div>',
methods: {
updateValue: function (event) {
var currency = "$" + event.target.value.replace(/\$/g, "");
this.$refs.myInput.value = currency;
//触发input事件
this.$emit('input', currency);
}
}
});
var app = new Vue({
el: "#app",
data: {
currency: "0"
}
});
可定制组件的v-model的prop和event，避免冲突
{{currency}}
<!--my-currency :myvalue="currency" @myinput="currency = $event.target.value"></my-currency-->
<my-currency v-model="currency" value="hello"></my-currency>
Vue.component('my-currency', {
//可定制v-model
model: {
prop: 'myvalue',
event: 'myinput'
},
//释放value属性
props: ['myvalue', 'value'],
template: '<div><input ref="myInput" :value="myvalue" @input="updateValue"/></div>',
methods: {
updateValue: function (event) {
var currency = "$" + event.target.value.replace(/\$/g, "");
this.$refs.myInput.value = currency;
//触发myinput事件
this.$emit('myinput', currency);
}
}
});
var app = new Vue({
el: "#app",
data: {
currency: "0"
}
});
非父子组件通信，简单场景使用一个空Vue实例做事件中转，复杂情况请考虑状态管理模式
var bus = new Vue();
bus.$emit('my-event', 6);
bus.$on('my-event', function(arg){});
4.使用Slots分发内容
slots标签让组件内容可以混合嵌套，类似Angular的transclusion
<!-- 最终生成html -->
<!--div>
<h1>child</h1>
<div>parent content</div>
</div-->
<my-component>
<div>parent content</div>
</my-component>
Vue.component('my-component', {
template: '<div><h1>child</h1><slot></slot></div>'
});
为slot指定name来配置如何分发内容
<!-- 最终生成html -->
<!--div>
<h1>header</h1>
<p>footer</p>
</div-->
<my-layout>
<h1 slot="header">header</h1>
<p slot="footer">footer</p>
</my-layout>
Vue.component('my-layout', {
template: '<div><slot name="header"></slot><slot name="footer"></slot></div>'
});
作用域插槽，暴露数据，允许父组件自定义渲染
<my-list :items="items">
<!-- template表示作用域插槽模板,scope为一临时变量,来至子组件 -->
<template slot="listItem" scope="props">
<!-- 自定义渲染 -->
<li>{{props.text}}</li>
</template>
</my-list>
Vue.component('my-list', {
props: ['items'],
template: '<ul><slot name="listItem" v-for="item in items" :text="item"></slot></ul>'
});
var app = new Vue({
el: "#app",
data: {
items: ["1", "2"]
}
});
5.动态组件
通过<component>元素，动态绑定is特性，可使用同一个挂载点，动态切换组件
<component :is="currentView"></component>
<!-- keep-alive保留切换出去的组件在内存,避免重新渲染 -->
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
<button @click="change">change</button>
var myHeader = {
template: '<h1>Header</h1>'
};
var myFooter = {
template: '<div>Footer</div>'
};
var myText = {
template: '<input type="text"/>'
};
var app = new Vue({
el: "#app",
data: {
//currentView: myHeader
currentView: 'myFooter'
},
components: {
myFooter: myFooter,
myText: myText
},
methods: {
change: function () {
this.currentView = (this.currentView == 'myText' ? 'myFooter' : 'myText');
}
}
});
6.杂项
组件分3部分：
- props允许外部传递数据给组件
- events允许外部和组件内部通信
- slots允许外部自定义内容渲染到组件中
子组件索引
<!-- ref为子组件指定索引,用来在javascript中直接访问子组件 -->
<my-component ref="my"></my-component>
Vue.component('my-component', {
data: function () {
return {name: "66"};
},
template: '<div>66</div>'
});
var app = new Vue({
el: "#app"
});
//通过实例属性$refs访问子组件
app.$refs.my.name;
异步组件
将应用拆分多个小模块，按需从服务器下载，Vue允许将组件定义为一个工厂函数，动态解析，建议配合Webpack异步加载功能食用
<async-component></async-component>
Vue.component('async-component', function (resolve, reject) {
//模拟异步网络请求
setTimeout(function () {
//调用porime模式resolve方法表示成功返回异步组件
resolve({template: '<div>async</div>'});
}, 1000);
});
var app = new Vue({
el: "#app"
});
组件命名约定
注册组件(或props)使用kebab-case,camelCase,PascalCase,HTML模板中只能使用kebab-case
递归组件
设置了name选项，组件才可以递归调用自己
<my-component :tree="tree"></my-component>
Vue.component('my-component', {
props: ['tree'],
name: 'component',
template: '<div>' +
'<div v-if="tree instanceof Array">' +
'<component :tree="item" v-for="item in tree"></component>' +
'</div>' +
'<div v-else>{{tree}}</div>' +
'</div>'
});
var app = new Vue({
el: "#app",
data: {
tree: [[1, 2], 3]
}
});
要保证递归调用有终止条件(如v-if最终返回false)，否则可能出现死循环
组件循环引用
A引用B，B中也引用A，使用Vue.component注册的全局组件，框架会自动解决依赖组件的矛盾
X-Templates
<my-component></my-component>
<script type="text/x-template" id="my-component">
<div>hello</div>
</script>
Vue.component('my-component', {
template: '#my-component'
});
低开销静态组件使用v-once，缓存渲染结果
Vue.component('my-component', {
template: '<div v-once>message</div>'
});
