<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="box"> <!-- <navbar @myevent="handleEvent"></navbar> <sidebar v-show="isShow" ></sidebar> --> <!-- <input type="text" ref="mytext"/> <input type="password" ref="mypassword"/> <div ref="mydiv">111111</div> <button @click="handleAdd">add</button> <child ref="mychild"></child> --> <navbar @myevnet="click"></navbar> <sidebar v-show="isShow"></sidebar> </div> </body> <script> Vue.component("navbar",{ template:` <div style="background:yellow"> nabbar- <button @click="click1">11</button> </div> `, methods: { click1(){ this.$emit("myevnet"); } }, }) Vue.component("sidebar",{ template:` <ul style="background-color: yellow; 200px;height: 500px;" > <li>首页</li> <li>钱包</li> <li>设置</li> </ul> ` }) new Vue({ el:"#box", data:{ isShow:false }, methods:{ click(){ this.isShow=!this.isShow } } }) // Vue.component("child",{ // data(){ // return { // myname:"child-111111111111111111111" // } // }, // template:`<div> // child---{{myname}} // </div>` // }) // new Vue({ // el: "#box", // // data: { // // isShow: true // // }, // methods: { // handleAdd(data){ // console.log(this.$refs.mytext,this.$refs.mydiv) // console.log(this.$refs.mychild.myname) // } // }, // }) // Vue.component("navbar", { // template: ` // <div style="background-color: red;"> // <button @click="handleClick()">点击</button>-导航栏 // </div> // `, // methods: { // handleClick(){ // this.$emit("myevent",'123') // } // }, // }) // Vue.component("sidebar", { // template: ` // <div style="background-color: yellow;" > // <ul> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // </ul> // </div> // ` // }) // new Vue({ // el: "#box", // data: { // isShow: true // }, // methods: { // handleEvent(data){ // console.log(data) // this.isShow=!this.isShow; // } // }, // }) </script> <style> .active{ background-color: green; } </style> </html>
下面是插槽slot
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="box"> <!-- <navbar @myevent="handleEvent"></navbar> <sidebar v-show="isShow" ></sidebar> --> <!-- <input type="text" ref="mytext"/> <input type="password" ref="mypassword"/> <div ref="mydiv">111111</div> <button @click="handleAdd">add</button> <child ref="mychild"></child> --> <navbar> <button @click="isShow=!isShow">11</button> </navbar> <sidebar v-show="isShow"></sidebar> </div> </body> <script> Vue.component("navbar",{ template:` <div style="background:yellow"> nabbar- <slot></slot> </div> `, // methods: { // click1(){ // this.$emit("myevnet"); // } // }, }) Vue.component("sidebar",{ template:` <ul style="background-color: yellow; 200px;height: 500px;" > <li>首页</li> <li>钱包</li> <li>设置</li> </ul> ` }) new Vue({ el:"#box", data:{ isShow:false } , // methods:{ // click(){ // this.isShow=!this.isShow // } // } }) // Vue.component("child",{ // data(){ // return { // myname:"child-111111111111111111111" // } // }, // template:`<div> // child---{{myname}} // </div>` // }) // new Vue({ // el: "#box", // // data: { // // isShow: true // // }, // methods: { // handleAdd(data){ // console.log(this.$refs.mytext,this.$refs.mydiv) // console.log(this.$refs.mychild.myname) // } // }, // }) // Vue.component("navbar", { // template: ` // <div style="background-color: red;"> // <button @click="handleClick()">点击</button>-导航栏 // </div> // `, // methods: { // handleClick(){ // this.$emit("myevent",'123') // } // }, // }) // Vue.component("sidebar", { // template: ` // <div style="background-color: yellow;" > // <ul> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // <li>11111</li> // </ul> // </div> // ` // }) // new Vue({ // el: "#box", // data: { // isShow: true // }, // methods: { // handleEvent(data){ // console.log(data) // this.isShow=!this.isShow; // } // }, // }) </script> <style> .active{ background-color: green; } </style> </html>