vue中的插槽

首先由一个例子来引出插槽的概念，我现在需要子组件中除了展示p标签之外，还要展示一段内容，这段内容并不是子组件所决定的，而是父组件传递来的。以往可以用props接收父组件传递过来的参数，如下：

页面效果：

可见传递过来的p标签被做了转义，这时尝试用v-html解决，但是外层会多出一个div标签，这并不是我们的本意：

Vue.component('child', {
    props: ['content'],
    template: '
hello
'
  })

继续尝试用template模板占位符，但是渲染不出来这个效果：

Vue.component('child', {
    props: ['content'],
    template: '
hello
'
  })

当传递的内容很多的时候，代码的可读性会变差：

– So，当子组件中有一部分内容是根据父组件传递过来的dom进行显示的时候，用插槽来实现就能解决我们上面所遇到的问题：

  
  
  



  
    
world
  //要显示的dom内容
  

页面效果：

– 另外插槽中也可以添加默认内容：

页面效果：

– 具名插槽
Slot标签代表的是插槽的所有内容，所以会出现下面的情况：

在这里插入代码片

  

    
      
header
      
footer
    
  
  

上面的例子中我们的本意是在内容content上方显示header，在content下方显示footer，但是渲染出的效果是：

我们也在上面提到，slot标签代表的是插槽中的所有内容，所以会有这样的结果，接下来引入的具名插槽就解决了这个问题，它通过给每一个插槽标记独特的标签来实现这种情况，那么我们就可以改成：

  

    
      
header
      
footer
    
  
  

– 作用域插槽
子组件给父组件传值，父组件决定渲染方式时，用作用域插槽，父组件决定子组件中的元素以何种形式渲染。比如下面的例子父组件用li标签的形式渲染子组件传来的数据。

页面效果：