Vue插槽原理与用法详解

本文实例讲述了Vue插槽原理与用法。分享给大家供大家参考，具体如下：

成都创新互联公司专注于长岛企业网站建设,响应式网站设计,电子商务商城网站建设。长岛网站建设公司,为长岛等地区提供建站服务。全流程按需求定制制作，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

1 插槽内容

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 元素作为承载分发内容的出口。

它允许你像这样合成组件：

  
    Your Profile
  

然后你在 的模板中可能会写为：

Vue.component('navigation-link', {
    template: `
      
      
      
    `
  });

当组件渲染的时候，这个 元素将会被替换为“Your Profile”。

插槽内可以包含任何模板代码，包括 HTML：

 
 
 Your Profile

甚至其它的组件：

 
 
 Your Profile

如果 没有包含一个 元素，则任何传入它的内容都会被抛弃。

2 具名插槽

有些时候我们需要多个插槽。例如，一个假设的 组件多模板如下：

对于这样的情况， 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

在向具名插槽提供内容的时候，我们可以在一个父组件的