Vue

组件

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);    }  } });