vue组件全局注册:
<body>
<div id='app'>
<my-component></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('my-component',{
template:'<div>我是全局注册</div>'
})
var app = new Vue({
el:'#app',
})
</script>
</body>
局部注册:
<div id='app'>
<my-component></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
var child = {
template:'<div>我是局部注册</div>',
data:function(){
return {
data:'js'}}
}
var app = new Vue({
el:'#app',
components:{
'my-component':child,
}
})
</script>
</body>
组件和vue实例一样,同样具有computed、methods、data等,data不同之处是函数。
组件之间数据传递:
父->子:props
子->父:emit、emit、on
1、父组件向子组件传递参数和数据:props可以使字符串数组或者对象
<div id='app'>
<my-component warn-message="我是父组件的消息"></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('my-component',{
props:['warnMessage'],
template:'<div>{{warnMessage}}</div>'
})
var app = new Vue({
el:'#app',
})
</script>
props可以传递动态绑定的值
<div id='app'>
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
var child = {
props:['message'],
template:'<div>{{message}}</div>'
}
var app = new Vue({
el:'#app',
components:{
'my-component':child,
},
data:{
parentMessage:'',
}
})
修改props:
1、父组件传递的props,子组件在自己的作用域内随意修改props
在子组件data中声明一个新的变量newdata,只需要维护newdata即可。
<div id='app'>
<my-component :init-data="1"></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('my-component',{
props:['initData'],
template:'<div>{{newdata}}</div>',
data:function(){
return{
newdata:this.initData
}
}
})
var app = new Vue({
el:'#app',
})
2、props作为需要转变的原始值 : 此时可以用计算属性来解决
<div id='app'>
<my-component :width="100"></my-component>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('my-component',{
props:['width'],
template:'<div :style="style">组件内容</div>',
computed:{
style:function(){
return{
width:this.width+'px'
}
}
}
})
var app = new Vue({
el:'#app',
})
props验证:对象形式
props:{
propsA:Number,
propsB:[String,Number],
propsC:{
type:Boolean,
default:true},
propsD:{
type:Number,
required:true},
propsE:{
type:Array,
default:function(){
return [];
}
},
propsF:{
validator:function(val){
return val > 10;
}
}
}
子组件向父组件传递数据:
子组件用emit()触发事件,父组件用emit()触发事件,父组件用on()来监听子组件事件
<div id='app'>
<p>总数:{{total}}</p>
<num @increase='getTotal' @reduce='getTotal'></num>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
Vue.component('num',{
template:'<div><button @click="handincrease">+</button><button @click="handreduce">-</button></div>',
data:function(){
return{
counter:0
}
},
methods:{
handincrease(){
this.counter++;
this.$emit('increase',this.counter);
},
handreduce(){
this.counter--;
this.$emit('reduce',this.counter);
}
}
})
var app = new Vue({
el:'#app',
data:{
total:0
},
methods:{
getTotal(total){
this.total = total
}
}
})
vue-bus:父子、兄弟、跨级传递
var bus = new Vue();
Vue.component('component-a',{
template:'<div><button @click="handleEvent">bus传递事件</button</div>',
methods:{
handleEvent(){
bus.$emit('on-message','来自子组件的消息')
}
}
})
var app = new Vue({
el:'#app',
data:{
message:''
},
mounted(){
var _this = this;
bus.$on('on-message',function(mes){
_this.message = mes;
})
}
})