Vue插槽原理与用法详解

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

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

1 插槽内容

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

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

Your Profile

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

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

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

Vue插槽原理与用法详解

插槽内可以包含任何模板代码,包括 HTML:


 
 
 Your Profile


甚至其它的组件:


 
 
 Your Profile


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

2 具名插槽

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

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

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