vue和React的插槽区别

vue中有插槽，而React不叫插槽，他叫Children

React中的类插槽

class Title extends Component{

render (){

return(

  // children插槽,将需要值的地方用children插入

// 类是使用this.props。函数是使用props

  <div>

    书名：{ this.props.children }

) }}

实例化对象

export default class App extends Component {

render() {

return (

  <div>

    <Title>HTML5权威指南</Title>

    <Title>JAVASCRIPT权威指南</Title>

    <Title>CUE权威指南</Title>

)}}

React中的具名插槽

当实例化对象中出现俩个参数时，如果直接使用children会直接显示俩个，而你想在俩个位置显示不同的内容时，就需要用到类似vue中的具名插槽

当在不同的地方需要不同值的时候就需要使用[]下标的形式去选中内容，children只有一个值时，就可以直接调用

    书名:{ this.props.children[0] }<br/>

    出版时间：{this.props.children[1]}

vue中的普通插槽

  <p>{{num}}</p>

就可以 插槽的方法

vue中的具名插槽

 <p>a</p>

  <p slot= ' hedrer '>{{num}}</p>

当你只想这个位置显示你想要的内容时，就可以使用具名插槽

<slot name= ’ hedrer>//这个时候就只会显示设置了name名字对应的内容

在vue官网中，vue的这种插槽在2.6版本之后就已经过时了