vue slot的使用

App.vue
   
   <titled-frame>
       <template v-slot="{ user1 }">
        My Image’s Title
        {{ user1.lastName}}
        <!-- {{ user.lastName }} -->
      </template>
    </titled-frame>

 

    <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>
 
 
 
   import titledFrame from './components/titledFrame'
   import testSolt from './components/testSolt'
 
 
 
titledFrame.vue
 
<template>
  <div class="titled-frame">
    <span>
      <slot v-bind:user1="user"> {{ user.lastName }}</slot>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        firstName: "Fan",
        lastName: "Jun",
      },
    };
  }
};
</script>
 
 
 
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",
    };
  }
};
</script>

在子组件 solt上可以v:bind:传参名="值"
 
在父组件使用的时候:
 
<template v-slot="{ user1 }">
        My Image’s Title
        {{ user1.lastName}}
</template>
 
 
                                    
  
 
      
 
posted @ 2021-06-13 01:45  haveProgress  阅读(86)  评论(0编辑  收藏  举报