vue中怎么使用slot分发内容-创新互联-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

vue中怎么使用slot分发内容-创新互联

这篇文章将为大家详细讲解有关vue中怎么使用slot分发内容，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

为山亭等地区用户提供了全套网页设计制作服务，及山亭网站建设行业解决方案。主营业务为做网站、成都做网站、山亭网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

一、什么是slot

在使用组件时，我们常常要像这样组合它们：

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot ，这个过程叫作内容分发（ transclusion ）。

注意两点：

1.< app＞组件不知道它的挂载点会有什么内容。挂载点的内容是由＜app ＞的父组件决定的。

2. 组件很可能有它自己的模板。

props 传递数据、events 触发事件和slot 内容分发就构成了Vue 组件的3 个API 来源，再复杂的组件也是由这3 部分构成的。

二、作用域


 {{ message }}

这里的message 就是一个slot ，但是它绑定的是父组件的数据，而不是组件＜child-component>的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。如：

Vue.component('child-component',{ template: '

子组件

' }); var app15 = new Vue({ el: '#app15', data: { showChild: true } });

这里的状态showChild 绑定的是父组件的数据，如果想在子组件上绑定，那应该是：

Vue.component('child-component',{ template: '子组件

', data: function(){ return { showChild: true } } });

因此， slot 分发的内容，作用域是在父组件上的。

三、slot用法

3.1 单个slot

在子组件内使用特殊的＜slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。

 
      
        分发的内容
        更多分发的内容

Vue.component('my-component16',{ template: '

' + '

如果父组件没有插入内容，我将作为默认出现＜

' +　　　　//预留的slot插槽 '

' }); var app16 = new Vue({ el: '#app16' });

渲染结果为：


  
    分发的内容

    
更多分发的内容

子组件child-component 的模板内定义了一个＜slot>元素，并且用一个＜p＞作为默认的内容，在父组件没有使用slot 时，会渲染这段默认的文本；如果写入了slot，那就会替换整个＜slot> 。

3.2具名slot

给＜slot> 元素指定一个name 后可以分发多个内容，具名Slot 可以与单个slot 共存。

  
      
        标题
        正文内容
        更多正文内容
        底部信息

Vue.component('my-component17',{ template: '' + '' + '' + '

' + '' + '' + '

'+ '' + '' + '

来自父组件的内容

Vue.component('my-component18',{ template: '' }); var app18 = new Vue({ el: '#app18' });

新闻中心

标题

底部信息

其他资讯