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

Posted 2020-09-19 半夏微澜ぺ

除非子组件模板包含至少一个<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>