vant组件库中的slot应该如何使用

Question

初入VUE-CLI，有个问题无法解决，使用vant导航栏，我想自定义邮编的内容，使用slot插槽插入富文本内容无效

https://youzan.github.io/vant...

子页面内容

<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      :left-text="left"
      :right-text="right"
      left-arrow
      border
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <slot name="right"></slot>
    </van-nav-bar>
  </div>
</template>

父页面内容

<template>
  <div>
    <base-header
      :title="title"
      :left="left"
    >
      <div slot="right"><div>这是要插入的内容</div></div>
    </base-header>
</div>
</template>
<script>
import BaseHeader2 from '../../components/Header'
export default {
  name: "ExternalList",
  components: {
    BaseHeader,
  },
  data() {
    return {
      shop_id: null,
      title: '购票',
      left: '返回',
      right: '筛选',
      list: Array,
      loading: false,
      finished: false,
      isLoading: false,
      page: 1,
      sign: 0
    }
  }
}
</script>

可以看到，显示结果右边是空的

<slot name="right"></slot>
<div slot="right"><div>这是要插入的内容</div></div>
这样写不对吗？
求大神答疑解惑！

Answer 1

1.子页面:

<slot name="right"></slot>

2.父页面:

  <template v-slot:right>
    <div>这是要插入的内容</div>
  </template>

试试

Answer 2

发现可以通过这种方式来写

父页面

div slot="screen">要插入的内容</div>

子页面

<div slot="right">
<slot name="screen">默认内容</slot>
</div>