01 插槽的基本使用
<body> <!-- 组件的插槽是为了封装的组件更加具有扩展性 --> <!-- 1.插槽的基本使用 组件中声明<slot></slot> 2.插槽的默认值 组件中使用 <slot><button>案例</button></slot> 3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素 --> <div id="app01"> <cpn></cpn> <cpn><a href="www.baidu.com">我可以替换组件中的默认插槽</a></cpn> <cpn> <h3>多个值替换,同时放入到组件中替换插槽</h3> <h4>多个值替换,同时放入到组件中替换插槽</h4> <h5>多个值替换,同时放入到组件中替换插槽</h5> </cpn> </div> <template id="cpn"> <div> <h3>我是组件</h3> <p>哈哈哈</p> <slot><button>我是默认按钮</button></slot> </div> </template> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el:"#app01", data:{ message:‘hello world‘ }, components:{ cpn:{ template:"#cpn" } } }) </script>
02 具名插槽
<body> <div id="app01"> <cpn><span slot="right">标题</span></cpn> <cpn><button slot="middle">按钮</button></cpn> </div> <template id="cpn"> <div> <slot name="left"><span>左边</span></slot> <slot name="middle"><span>中间</span></slot> <slot name="right"><span>右边</span></slot> </div> </template> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el:"#app01", data:{ message:‘hello world‘ }, components:{ cpn:{ template:"#cpn" } } }) </script>
03 编译作用域概念
解释:此处div id="app01" 模块中使用了组件cpn,可以当做基本的div来看待,使用的isShow会从Vue实例中取值
组件div中button中使用的isShow取自身组件中的isShow的值
<body> <div id="app01"> <cpn v-show="isShow"></cpn> </div> <template id="cpn"> <div> <h3>我是组件</h3> <p>哈哈哈哈</p> <button type="button" v-show="isShow">按钮</button> </div> </template> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let app = new Vue({ el:"#app01", data:{ message:‘hello world‘, isShow:true }, components:{ cpn:{ template:"#cpn", data(){ return { isShow:false } } } } }) </script>