首页 > 代码库 > 使用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分发内容 作用域插槽
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。