全局組件的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .main { width: 100%; } .head { width: 100%; height: 80px; background-color: purple; } .main2 { width: 100%; height: 1000px; } .main2 .aside { float: left; width: 30%; height: 100%; background-color: green; } .main2 .content { float: left; width: 70%; height: 100%; background-color: red; } .default { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; border-color: #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .success { color: #fff; background-color: #67c23a; border-color: #67c23a; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> // 全局組件 // 第一個參數是組件的名字，第二個參數是options // 1.在父組件中 先綁定 :自定義的屬性名 = posts // 2.子要聲明 props:['自定義的屬性名'] 來接收 // 3.收到了就是自己 你可以任意使用 // slot 元素作為承載分發內容的出口 Vue.component('Vbtn', { template: ` <button class = 'default' :class = 'type'> <slot></slot> </button> `, props: ['type'] }); var Vcontent = { template: ` <div class='content'>我是內容組件 <Vbtn @click.native = 'add'>刪除</Vbtn> <ul> <li v-for = '(item,index) in posts'> <h3>{{item.title}}</h3> <h4>{{item.content}}</h4> </li> </ul> </div> `, props: ['posts'], methods: { add() { alert(1); } } } var Vaside = { template: ` <div class='aside'>我是側邊欄組件 <Vbtn type = 'success'>播放</Vbtn> </div> ` }; // 局部組件：聲子 掛子 用子 var Vheader = { template: ` <div class='head'> 我是頭部組件 <button @click = 'changeFontSize'>字體變大</button> </div> `, methods: { changeFontSize() { // 觸發父組件 中聲明的自定義事件 vue $emit() // 第一個參數是觸發自定義事件的名字 第二個參數就是傳進去的值 this.$emit('change') } } }; // 1.聲明局部組件 App入口組件 var App = { template: ` <div class='main' :style = '{fontSize:postFontSize+"em"}'> <Vheader @change = 'changeHandler'/> <div class = 'main2'> <Vaside /> <Vcontent :posts = 'posts'/> </div> </div> `, methods: { changeHandler() { this.postFontSize += .1; } }, data() { return { posts: [{ id: 1, title: "我的第一篇博客", content: '天王該帝王' }, { id: 2, title: "我的第二篇博客", content: '小雞燉蘑菇' }, { id: 3, title: "我的第三篇博客", content: '寶塔鎮河妖' } ], postFontSize: 1 } }, components: { Vheader, Vaside, Vcontent } }; new Vue({ el: '#app', // 3.使用 template: '<App></App>', data() { return { } }, // 2.掛載組件 components: { App } }); </script> </body> </html>