vue之組件交互與slot · 前端技術總結

1、兄弟組件交互 ![](https://box.kancloud.cn/53143ece69e2b24dcd0986016fc7e93c_217x322.jpg) demo.html ~~~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>兄弟組件交互</title> <script src="js/vue.min.js"></script> <style> .green{background-color: green;-webkit-transition: all .5s ease;transition: all .5s ease;} .greenActive{background-color: #f00;} </style> </head> <body> <div id="app"> <Hello ref="hello"></Hello> <World title="this is world.." v-bind:style="worldStyle"></World> </div> <script> var app = new Vue({ el: '#app', data: { worldStyle: { width: '100px', height: '100px', border: '1px solid #ddd', marginTop: '10px' } }, components: { 'Hello': { template: '<div v-bind:style="helloStyle"><p v-on:click="clickFn">{{ say }}</p></div>', data: function() { return { helloStyle: { width: '200px', height: '200px', backgroundColor: '#ccc' }, say: 'hello' }; }, methods: { clickFn: function() { this.say = 'hello'; app.$children[1].$data.classA = 'green greenActive' } } }, 'World': { props: { title: String }, data: function() { return { classA: 'green' }; }, template: '<div v-bind:class="[classA]">{{ title }}<button type="button" v-on:click="clickFn">world</button></div>', methods: { clickFn: function() { this.classA = 'green'; app.$children[0].$data.say = 123; // app.$refs.hello.say = 333; 使用ref來實現 } } } } }); </script> </body> </html> ~~~ 上述無疑就是VUE的核心所在，MVVM模式 ![](https://box.kancloud.cn/bfa87d3472f4be48c371930881f159c0_637x328.jpg) 在DOM與JS之間加個中間件VUE，使得DOM與JS的交互更便捷。。寫到這里突然感覺寫不下去了，畢竟沒有在項目中使用，而且VUE API中的東西稍多，一一介紹不如看VUE API。。只想說在合適的地方使用VUE，不要偏激。。 2、slot卡槽 ![](https://box.kancloud.cn/a8ff918709c861e994b312146177c4fc_400x396.jpg) demo.html ~~~ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slot</title> <script src="js/vue.min.js"></script> </head> <body> <div id="demo"> <blog-post> <slot name="header"></slot> <p slot="footer"> Copyright 2016 Evan You </p> <p>main</p> </blog-post> </div> <script> Vue.component('blog-post', { render: function (createElement) { var header = this.$slots.header; var body = this.$slots.default; var footer = this.$slots.footer; return createElement('div', [ createElement('header', '123'), createElement('main', body), createElement('footer', footer) ]) } }) new Vue({ el: '#demo' }); </script> </body> </html> ~~~