vue-CLI4父组件向子组件传入src属性的方法

 父组件需要使用v-bind绑定require， @是vue-cli4给src路径起的别名.

@/assets/tabbar/home.svg相当于src/assets/tabbar/home.svg

注意require里面的内容需要使用''

 <tab-bar-item
        :svgSrc="require('@/assets/tabbar/home.svg')"
        :activeSvgSrc="require('@/assets/tabbar/home-active.svg')"
        text="首页"
      >

子组件直接v-bind接收就可以了

<template>
  <div class="toolbar-item">
    <img :src="svgSrc" />
    <img :src="activeSvgSrc" />
    <div>{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
    svgSrc: {
      type: String,
      require: true,
    },
    activeSvgSrc: {
      type: String,
      require: true,
    },
    text: {
      type: String,
      require: true,
    },
  },
  data: () => {
    return {
      isActive: false,
    };
  },
};
</script>

效果：