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

vue学习笔记-组件篇（插槽）

2020-01-13 07:32 363 查看

匿名插槽

  • 当组件中有插槽内容是显示插槽内容
  • 当组间中没有插槽内容是，会默认显示slot中的插槽内容

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<!-- 组件名称-->
<!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->
<my-component>插槽内容</my-component>
</div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
//全局注册组件
//第一个参数自定义标签名
Vue.component('my-component', {
template: `
<div>
<slot><span>默认插槽内容</span></slot>
</div>
`
})
//创建事件中心
var hub = new Vue()
//创建vue实例
var vm = new Vue({
el: '#app',
data: {

},
methods: {

}
})

</script>

</html>

页面显示结果如下:

当组建中没有插槽内容是会默认显示slot中的内容

具名插槽

  • 有名字的插槽
  • slot中带有name的插槽

代码如下（这里使用了

2.6.0+
新增的
v-slot
指令）

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<!-- 组件名称-->
<my-component>
<template #header>
<h1>页面头部</h1>
</template>
<template>
<h1>页面内容</h1>
</template>
<template #footer>
<h1>页面底部</h1>
</template>
</my-component>
</div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
//全局注册组件
//第一个参数自定义标签名
Vue.component('my-component', {
template: `
<div>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</div>
`
})
//创建事件中心
var hub = new Vue()
//创建vue实例
var vm = new Vue({
el: '#app',
data: {

},
methods: {

}
})

</script>

</html>

页面显示结果如下：

作用域插槽

  • 父组件对子组件加工处理
  • 既可以复用子组件的slot，又可以使slot内容不一致

代码如下(这里使用了

2.6.0+
新增的
v-slot
指令):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<!-- 组件名称-->
<my-component>
<!--独占默认插槽  -->
<!-- <template v-slot:default="slotProps">
姓名: {{slotProps.user.firstName+slotProps.user.firstName.lastName}}
</template> -->

<!--不带参数的 v-slot 被假定对应默认插槽：  -->
<!--独占默认插槽缩写形式+对象解构更简单  -->
<template v-slot="{user}">
姓名: {{user.firstName+''+user.lastName}}
</template>

</my-component>
</div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
//全局注册组件
//第一个参数自定义标签名
Vue.component('my-component', {
data: function () {
return {
user: {
lastName: '肖战',
firstName: '李'
}
}

},
template: `
<div>
<span>
<slot :user="user">{{ user }}</slot>
</span>
</div>

`
})
//创建vue实例
var vm = new Vue({
el: '#app',

methods: {

}
})

</script>

</html>

页面显示结果如下

  • 点赞
  • 收藏
  • 分享
  • 文章举报
码猿_Q 发布了30 篇原创文章 · 获赞 1 · 访问量 713 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航