分享出来让思路更成熟。
首先组件是 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')
}
}
})
先写到这里，晚点在补充。