给vant组件van-nav-bar添加插槽修改标题

在组件中

<template>

  <div>

    <div class="head">

      <van-nav-bar left-arrow @click-left="onClickLeft">

        <template #title>

          <slot>{{ title }}</slot>

        </template>

      </van-nav-bar>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      title: '集中采购管理系统'

    };

  },

  methods: {

    onClickLeft() {

      this.$router.back()

    },

  },

};

</script>

使用组件

<template>

  <div>

    <MainTitle name="title">{{ title }}</MainTitle>

  </div>

</template>

<script>

import MainTitle from '@/components/MainTitle'

export default {

  components: {

    MainTitle

  },

  data() {

    return {

      title: ''

    }

  },

  created() {

    console.log(this.$route.query.title)

    this.title = this.$route.query.title

  },

}

</script>