码迷,mamicode.com
首页 > 其他好文 > 详细

vue插槽嵌套

时间:2020-01-09 13:15:50      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:component   record   port   年龄   嵌套   imp   效果   png   return   

插槽嵌套的关键是父组件插槽的slot=子组件插槽的名称

子组件 slotTest1.vue

<template>
    <div>        
        <slot name=‘slot1‘></slot>
    </div>
</template>

 

slotTest2.vue

<template>
    <slot-test1>
        <slot name=‘slot2‘ slot=‘slot1‘ record=‘我是插槽2‘>
        </slot>    
    </slot-test1>
</template>
<script>
import slotTest1 from "./slotTest1"
export default {
  components: {
    slotTest1
  },
  data() {
    return {     
    }
  }
}
</script>

父页面 test.vue

<template>
    <slot-test2>
        <div slot=‘slot2‘ :slot-scope=‘record‘>
            <p>{{record}}</p>
            <p>是真的吗?</p>
        </div>
    </slot-test2>
</template>
<script>
import slotTest2 from ./slotTest2
export default {
    components:{slotTest2},
    data(){
        return{
            record:年龄100岁
            
        }
    }
}
</script>

 

页面效果

 

技术图片

 

vue插槽嵌套

标签:component   record   port   年龄   嵌套   imp   效果   png   return   

原文地址:https://www.cnblogs.com/Dingzy/p/12170650.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!