vue组件
分享出来让思路更成熟。
首先组件是 Vue.js 最强大的功能之一。
可以减少很多的工作量,提高工作效率。
编写一个可复用性的组件,虽然官网上也有。。。。
编写可复用性的vue组件
具备一下的几个要求:
1,传递数据
2,传递事件
3,分发内容
恕我还活在vue1.0的时代,现在2.0了,有不少改动。
最重要的一点是Props 现在只能单项传递,不能在组件上改变然后传回给父组件。(只能父亲影响儿子了)
麻烦好多~~~
想要父亲听的进去进行改变只有以下的几种方法了。不再像之前那么好说了,么么哒
1,自定义组件事件
2,自定义输入组件 (使用组件事件)
3,全局状态管理(vuex)
下面我就使用第一种方法。
这是html的代码。
1 <div id="app">2 <button @click="canshow = true">显示弹出</button> 3 <v-modal title="提示" v-if="canshow" @close="canshow = false" @submit="submit"> 4 我写什么就传递什么。 5 </v-modal> 6 </div>
这是模版的内容
1 <script type="text/x-template" id="modal-template"> 2 <div class="modal-mask"> 3 <div class="modal-wrapper"> 4 <div class="modal-container"> 5 <a class="modal-close" href="javascript:;" @click="$emit('close')">×</a> 6 <p class="modal-head">{{title}}</p> 7 <div class="modal-body"> 8 <slot></slot> 9 </div> 10 <div class="model-foot"> 11 <button @click="$emit('submit')">Enter</button> 12 <button @click="$emit('close')">Cancel</button> 13 </div> 14 </div> 15 </div> 16 </div>
js部分
1 Vue.component('v-modal', { 2 template: '#modal-template', 3 data: function () { 4 return { 5 canshow: this.show 6 } 7 }, 8 props:{ 9 title:{ 10 type: String, 11 default: 'Tip' 12 }, 13 show: Boolean, 14 }, 15 }); 16 var Vue = new Vue({ 17 el: '#app', 18 data: { 19 canshow: false, 20 }, 21 methods: { 22 submit:function() { 23 this.canshow = false; 24 console.log('close') 25 } 26 } 27 })
先写到这里,晚点在补充。