vue slot+传参

2019-04-28 08:21:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

插槽分为默认插槽和具名插槽:

默认插槽:

  
//父组件
<div> <h3>父组件</h3> <testChild> <div>默认插槽</div> </testChild> </div>

//子组件
<div>
<h4>子组件</h4>
<slot></slot>
</div>

 

 

具名插槽:

  注意:具名插槽需要包裹在  template  标签中,否则会报错

//父组件

<div>
        <h3>父组件</h3>
        <testChild>
            <template v-slot:test>//v-slot: + 插槽名
                <ul>
                    <li v-for="item in list">{{item.name}}</li>
                </ul>
            </template>
        </testChild>
    </div>

//子组件
 <div>
        <h4>子组件</h4>
        <slot name="test"></slot> //name="插槽名"
    </div>

 

 

 

子组件向父组件传参:

//父组件 
<div> <h3>父组件</h3> <testChild> <template v-slot:test="data">//具名插槽,v-slot: +插槽名+ ="自定义数据名",子组件所传参数都是其属性 <ul> <li v-for="item in data.list2">{{item.name}}</li> </ul> </template> <template v-slot="dataDefalut">//默认插槽 {{dataDefalut.sName}} </template> </testChild> </div>


//子组件
<template>
<div>
<h4>子组件</h4>
<slot name="test" :list2="list2"></slot>
<slot :sName="name"></slot>
</div>
</template>

<script>
export default {
name: "testChild",
data(){
return {
list2:[
{name:'ccc'},
{name:'ddd'}
],
name:'name'
}
}
}
</script>

结果:

 


原文链接:https://www.cnblogs.com/gxp69/p/10784299.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:canvas 绘制刮刮卡

下一篇:js函数式编程