您的位置：首页 > Web前端 > Vue.js

Vue笔记：slot插槽

2020-06-15 23:42 155 查看

solt插槽的基本使用

一、为什么使用插槽

组件的插槽是为了让封装的组件有更好的扩展性，让使用者决定要展示什么东西

二、插槽的简单实现

组件模板：

<template id="cpn">
<div>
<h2>我是cpn</h2>
<!-- <button type="button" @click="btnClick">确定</button> -->
<slot></slot>
</div>
</template>

html代码中运用组件，并将不同的内容放入插槽

<cpn><button type="button">确定</button></cpn>
<cpn><span>哈哈哈哈哈哈</span></cpn>
<cpn><span>呵呵呵呵呵呵</span></cpn>

slot
中可以定义默认的插槽，如果没有定义插槽中的东西会默认使用
slot
中的默认值，如果有多个值放入插槽，会全部放入插槽中

三、具名插槽的使用

<template id="cpn">
<div>
<slot name="left">左边的</slot>
<slot name="center">中间的</slot>
<slot name="right">右边的</slot>
</div>
</template>

使用：

<cpn><span slot="center">hahahahaha</span></cpn>

效果：

四、作用域插槽

手册中：父组件模板的所有东西都会在父级作用域内编译；子组件模板的左右东西都会在子级作用域内编译

对于实例中用到的数据，哪里注册的这个组件，就用哪里的数据

组件模板只会用组件内的数据，也就是组件注册时会要给到的data函数中的数据

案例

1、案例需求

子组件中包括一组数据，比如：

books:[“源氏”,“夕颜”,“紫姬”,“藤壶妃子”,“胧月夜”]

    需要在多个页面进行展示：
  • 水平方向展示
  • 列表方式展示
  • 展示数组
#### 2、案例实现 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn>
<h2>hello</h2>
<template slot-scope="slot">
<div>
<span v-for="item in slot.data">{{item}}-</span>
<!--这个还可以写成<span>{{slot.data.join('-')}}</span>这个可以使最后一个短横没有-->
</div>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="characters">
<ul>
<li v-for="item in characters">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let cpn={
template:'#cpn',
data(){
return {
characters:["源氏","夕颜","紫姬","藤壶妃子","胧月夜"]
}
},
methods:{}
}
var app=new Vue({
el:'#app',
data:{},
methods:{},
components:{
cpn
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航