向Vue子组件传递图片路径时出现unexpected token: ':'错误求助

错误原因 #

你在使用v-bind（即:logo）传递图片URL时，Vue会将引号内的内容视为JavaScript表达式解析。而URL中的https:冒号属于非法的JavaScript表达式开头，因此抛出了unexpected token: ':'的错误。

两种解决方式 #

• 方式一：直接传递字符串属性
  不需要使用v-bind，直接以普通HTML属性的形式传递字符串：

  <div class="js-product-map">
    <product-map
      logo="https://path.to.image/image.jpg"
    />
  </div>
  

• 方式二：用单引号包裹字符串字面量
  如果必须使用v-bind（比如后续需要换成动态变量），将URL用单引号包裹，让Vue识别为合法的字符串表达式：

  <div class="js-product-map">
    <product-map
      :logo="'https://path.to.image/image.jpg'"
    />
  </div>
  

你的子组件代码没有问题，只需修改父组件中传递logo属性的方式即可。

内容的提问来源于stack exchange，提问作者Tyssen