vue组件

分享出来让思路更成熟。

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

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

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

编写可复用性的vue组件

具备一下的几个要求：

　　1，传递数据

　　2，传递事件

　　3，分发内容

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

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

麻烦好多~~~

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

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

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

这是html的代码。

<div id="app">2     <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')
      }
  }
})

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