vue组件

分享出来让思路更成熟。

首先组件是 Vue.js 最强大的功能之一。

可以减少很多的工作量，提高工作效率。

编写一个可复用性的组件，虽然官网上也有。。。。

编写可复用性的vue组件

具备一下的几个要求：

　　1，传递数据

　　2，传递事件

　　3，分发内容

恕我还活在vue1.0的时代，现在2.0了，有不少改动。

最重要的一点是Props 现在只能单项传递，不能在组件上改变然后传回给父组件。（只能父亲影响儿子了）

麻烦好多~~~

想要父亲听的进去进行改变只有以下的几种方法了。不再像之前那么好说了，么么哒

1，自定义组件事件
2，自定义输入组件 (使用组件事件)
3，全局状态管理（vuex）

下面我就使用第一种方法。

这是html的代码。

 <div id="app">     <button @click="canshow = true">显示弹出</button>
     <v-modal title="提示" v-if="canshow" @close="canshow = false" @submit="submit">
         我写什么就传递什么。
     </v-modal>
 </div>

这是模版的内容

 <script type="text/x-template" id="modal-template">
 <div class="modal-mask">
     <div class="modal-wrapper">
         <div class="modal-container">
             <a class="modal-close" href="javascript:;" @click="$emit('close')">×</a>
             <p class="modal-head">{{title}}</p>
             <div class="modal-body">
                 <slot></slot>
             </div>
             <div class="model-foot">
                 <button @click="$emit('submit')">Enter</button>
                 <button @click="$emit('close')">Cancel</button>
             </div>
         </div>
     </div>
 </div>

js部分

 Vue.component('v-modal', {
   template: '#modal-template',
   data: function () {
     return {
       canshow: this.show
     }
   },
   props:{
       title:{
           type: String,
           default: 'Tip'
       },
       show: Boolean,
   },
 });
 var Vue = new Vue({
   el: '#app',
   data: {
        canshow: false,
   },
   methods: {
       submit:function() {
           this.canshow = false;
           console.log('close')
       }
   }
 })

先写到这里，晚点在补充。