首页 > 代码库 > 使用slot分发内容 作用域插槽

使用slot分发内容 作用域插槽

除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃。当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

 

 

作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:

在父级中,具有特殊属性scope的<template>元素,表示它是作用域插槽的模板,scope的值对应一个临时变量名,此变量接受从子组件传递的prop对象

demo:

var app=new Vue({

  el:‘#app‘,

  components:{      

    ‘scope-component2‘:{
        template:‘<div><p>this is a child</p><slot text="this info from child"></slot></div>‘

    }

  }
});

html

<scope-component2>
      <template scope="props">
        <p>{{props.text}}</p>
       </template>
    </scope-component2>

 

使用slot分发内容 作用域插槽