一、slot插槽
1、基本使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <div id="app"> <div>{{ message }}</div> <cpn><span>hehe</span></cpn> <cpn><button>hehe</button></cpn> </div> <template id="cpn"> <div> <h2>测试</h2> <slot></slot> </div> </template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> const app = new Vue({ el:'#app', data:{ message:"hello vue" }, components:{ cpn:{ template:`#cpn` } } }); </script>
|
2、默认值
- 如果设定了默认值,则当没有值的时候,显示默认值,并且可以通过name属性修改某个默认值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| <div id="app"> <div>{{ message }}</div> <cpn><span slot="left">sss</span></cpn> </div> <template id="cpn"> <div> <h2>测试</h2> <slot name="left">左边</slot> <slot>中间</slot> <slot>右边</slot> </div> </template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> const app = new Vue({ el:'#app', data:{ message:"hello vue" }, components:{ cpn:{ template:`#cpn` } } }); </script>
|
3、作用域
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <div id="app"> <div v-show="isShow">{{ message }}</div> <npc></npc> </div> <template id="npc"> <div> <h2 v-show="isShow">hhhh</h2> </div> </template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> const app = new Vue({ el:'#app', data:{ message:"hello vue", isShow: true },
components:{ npc:{ template:`#npc`, data(){ return { isShow:false } } } } }); </script>
|
4、子插槽传递数值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <div id="app"> <div>{{ message }}</div> <cpn>
<template slot-scope="slot">
<span>{{slot.data.join(' - ')}}</span> </template> </cpn> </div> <template id="cpn"> <div>
<slot :data="planguage"> <ul> <li v-for="item in planguage">{{item}}-</li> </ul> </slot> </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> const app = new Vue({ el:'#app', data:{ message:"hello vue" }, components:{ cpn:{ template:`#cpn`, data(){ return { planguage:['no1','no2','no3'] } } } } }); </script>
|
-
Next Post
vue.js笔记五
-
Previous Post
vue.js笔记三