功能簡述：
定義兩個組件，通過父子控件傳值，來實現其中一個組件button點擊時 控制另外一個組件顯示與消失
先看錯誤代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <title>slot的應用</title> </head> <body> <div id="app"> <mychild> <!-- <button @click="isShow = !isShow">點我顯示或隱藏列表</button> --> <button @click="handleClick">點我顯示或隱藏列表</button> </mychild> <!-- 通過父子組件傳遞，控制顯示與不顯示 --> <mynvarbar :myShow=isShow> <li v-for="data in list"> {{data}} </li> </mynvarbar> <!-- 直接通過綁定isShow控制顯示與不顯示 --> <!-- <mynvarbar v-show="isShow"> <li v-for="data in list"> {{data}} </li> </mynvarbar> --> </div> </body> <script> var child = { template:`<div> nvarbar <slot></slot> <div>` } var nvarbar = { template:` <div v-show="myShow"> <ul> <slot></slot> </ul> </div> `, props:['myShow'] } var vm = new Vue({ el:'#app', data:{ list:['www.baidu.com','www.google.com','www.hao123.com'], isShow:false }, components:{ 'mychild':child, 'mynvarbar':nvarbar }, methods:{ handleClick(){ this.isShow = !this.isShow console.log(this.isShow) } } }) </script> </html>
錯誤的原因就是：
在綁定props時，參數用了myShow的寫法，改為myshow 就可以正常顯示了