怎么实现Vue的插槽功能呢?
1.第一种实现方式
父组件 App.js
import React, { Component } from "react";
import NavBar from "./NavBar";
export default class App extends Component {
render() {
return (
<div>
{/* 1. 第一种实现的方式 */}
<NavBar>
<span>左边</span>
<strong>中间</strong>
<a href="#">右边</a>
</NavBar>
</div>
);
}
}
NavBar.js页面
import React, { Component } from "react";
import "./style.css";
export default class NavBar extends Component {
render() {
console.log(this.props.children);
return (
// 1. 第一种实现的方式
<div className="nav-bar">
<div className="nav-left">{this.props.children[0]}</div>
<div className="nav-center">{this.props.children[1]}</div>
<div className="nav-right">{this.props.children[2]}</div>
</div>
);
}
}
style.css
body {
padding: 0;
margin: 0;
}
.nav-bar {
display: flex;
}
.nav-left, .nav-right {
height: 44px;
width: 70px;
background-color: red;
line-height: 44px;
text-align: center;
}
.nav-center {
flex: 1;
height: 44px;
line-height: 44px;
text-align: center;
background-color: blue;
}
实际截图
image.png
2.第二中方式实现
实际截图
image.png
网友评论