20181120——Vue中插槽概念

在建立子模板的时候,template中 如果 v-for=‘item of list’ 在多个地方调用子模板,此时就需要有插槽的概念
子组件模板

Vue("child",{
data,
template,<slot v-for='item of list' :item='item"></slot>

在父组件模板中

<div>
<child>//在内层要嵌套一个slot,所以必须有个template标签
<template slot-scope='props'>
<li>{{props.item}}</li>	
</template>
</child>
</div>

逻辑是父组件给子组件传递数据的时候,传递了一个插槽,这个插槽叫做作用域插槽
作用插槽必须是template的开头结尾的标签
还要声明 slot-scope=“数据都存放在哪里”
然后再用一个标签,接受如何展示该数据,

为什么使用作用域插槽
当子组件做循环,或者某一部分

猜你喜欢

转载自blog.csdn.net/qq_36344771/article/details/84301201