首页 > 其他 > 详细

vue slot的使用

时间:2021-06-13 09:49:00      阅读:26      评论:0      收藏:0      [点我收藏+]
app.vue
 
 <test-solt>
      <div>1111111</div>
      <template v-slot:header>
        <div>solt名header</div>
      </template>
      <template v-slot:content="title">
        <div>{{title.title}}</div>
      </template>
    </test-solt>
 
    <titled-frame>
       <template v-slot="{ user1 }">
        My Image’s Title
        {{ user1.lastName}}
        <!-- {{ user.lastName }} -->
      </template>
    </titled-frame>
 
import titledFrame from ‘./components/titledFrame‘
import testSolt from ‘./components/testSolt‘
import TestSolt from ‘./components/testSolt.vue‘
 
 
  components: {
    titledFrame,
    testSolt
  }
 
 
 
titleFrame.vue
 
<template>
  <div class="titled-frame">
    <span>
      <slot v-bind:user1="user"> {{ user.lastName }}112 </slot>
    </span>
  </div>
</template>

<script>
export default {
 
  data() {
    return {
      user: {
        firstName: "Fan",
        lastName: "Jun",
      },
    };
  },
  created(){

  },
  components: {},
};
</script>

<style  scoped>
</style>
 
 
testSolt.vue
 
<template>
    <div>
        <slot></slot>
        测试solt
        <slot name="header"></slot>
        <slot name="content" v-bind:title="title">
        </slot>
    </div>
</template>

<script>
export default {
     data() {
    return {
        title:‘titletitletitletitle‘ 
    }
  },
  components: {

  }
}
</script>

<style>

</style>
 
显示:
My Image’s Title Jun
1111111
测试solt
solt名header
titletitletitletitle

vue slot的使用

原文:https://www.cnblogs.com/geekjsp/p/14879489.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!