组件
1、定义组件
2、注册组件
<script type="text/x-template" id="child-tpl">
<input v-model="msg"/>
<button v-on:click="notify">触发</button>
</script>
<!--start
<template id="child-tpl">
<input v-model="msg"/>
<button v-on:click="notify">触发</button>
</template>
子组件 -->
// 第一种 通用组件定义
var Child = Vue.extend({
template:'#child-tpl',
data:function(){
return {
msg:'good '
};
},
methods:{
notify:function(){
if(this.msg.trim()){
this.$dispatch('child-msg',this.msg);
this.msg = '';
}
}
}
});
Vue.compoent('child',Child);
// 第二种 语法糖形式
Vue.component('child',{
template:'#child-tpl',
data:function(){
return {
msg:'good '
};
},
methods:{
notify:function(){
if(this.msg.trim()){
this.$dispatch('child-msg',this.msg);
this.msg = '';
}
}
}
});
var App = new Vue({
el:'#demo',
data:{
messges:[]
},
methods:{
'handleChild':function(mes){
this.messges.push(mes);
}
}
});