前言
创建Vue实例,相当于创建了一个组件。
props: 接收父组件传递到子组件中的数据。
插槽:接收父组件向子组件传递的html文本。
插槽代码
定义好组件之后,我们可以当成标签来使用组件。
如果向这种组件之间写入内容,组件标签内所有的内容默认都会被忽略,不会渲染在页面中的。
如果想要显示,显示方法如下:通过<slot>标签来接收父组件向子传递的html文本。
遇到的问题:显示不出来插槽作用域里面的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插槽问题</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
body,
p {
margin: 0;
padding: 0;
}
#layout {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
#layout>header {
height: 100px;
background-color: skyblue;
/* 解决上边距塌陷 */
/* overflow: hidden; */
}
#layout>main {
height: 400px;
background-color: seashell;
}
#layout>footer {
height: 80px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 父组件模板 -->
<div id="app">
<!-- id打在div上了 -->
<base-layout id="layout">
<p>插入头部</p>
<p>插入主体</p>
<p>插入底部</p>
<template v-slot:header>
<p>补充内容</p>
</template>
<template v-slot:default>
<p>1111</p>
</template>
</base-layout>
<!-- 问题:显示不出来 -->
<base-layout v-slot='slotProps'>{{slotProps.user.id}}</base-layout>
</div>
<!-- 子组件模板 -->
<template id="baseLayout">
<div>
<header>
<p>头部</p>
<slot name="header"></slot>
</header>
<main>
<p>主体</p>
<slot name="default"></slot>
</main>
<footer>
<p>底部</p>
<slot>后备内容</slot>
</footer>
<div>
<slot :user="user"></slot>
</div>
</div>
</template>
<script>
var baseLayout = {
template: '#baseLayout',
data() {
return {
user: {
id: 1001,
age: 18
}
}
}
}
Vue.component('baseLayout', baseLayout)
let vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
作用域插槽代码:
作用域插槽:为了让子组件的数据能够在父组件的编译作用域中使用。
<body>
<div id="app">
<current-user v-slot:default="slotProps">{{slotProps}}</current-user>
<current-user v-slot="slotProps">{{slotProps.user.username}}</current-user>
<current-user v-slot="slotProps">{{slotProps.user.realname}}</current-user>
<current-user v-slot="{user}">{{user.email}}</current-user>
<current-user v-slot="{user}">{{user.mobile}}</current-user>
</div>
<template id="cuser">
<div>
<h2>当前用户组件</h2>
<slot :user="user">无数据</slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var currentUser = {
template: '#cuser',
data() {
return {
user: {
username: 'Steven',
realname: '史蒂芬',
email: 'steven@qq.com',
mobile: '13012345678'
}
}
}
}
let vm = new Vue({
el: '#app',
data: {
message: 'hello vuejs'
},
components: {
currentUser
}
})
</script>
</body>
感悟:好好学习,提升自我,莫浪费时间在不值得的人身上,除非你很有决心,否则注定失败。