vant - Navbar slot 插槽使用

//子组件
<template>
  <van-nav-bar>
    <slot slot="left"  name="left"></slot>
    <slot slot="title" name="title"></slot>
    <slot slot="right" name="right"></slot>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'navbar'
}
</script>

<style>

</style>

//父组件
<template>
  <NavBar>
    <span slot="left" class="van-nav-bar__text">返回</span>
    <div slot="title" class="van-nav-bar__title van-ellipsis">我是home标题</div>
    <van-icon name="search" slot="right" />
  </NavBar>
</template>

<script>
import NavBar from '@/components/NavBar'

export default {
  name: 'index',
  components: { NavBar }
}
</script>

<style>

</style>

猜你喜欢

转载自www.cnblogs.com/ibos/p/11612107.html
今日推荐