Vue组件外层为span却未内联渲染，原因何在？

嗨，我来帮你搞定这个问题！你之所以发现外层用span的Vue组件没被内联渲染，核心问题出在你的<liste-villes>组件内部的**<p>标签**上。

咱们得先搞清楚HTML元素的布局特性：<p>是块级元素，它的默认样式就是独占一整行，不管你把它嵌套在多少层内联元素（比如span）里，块级元素的这个特性都会“突破”外层的内联布局，导致整个组件的内容变成块级显示，自然没法和其他内联元素排在一行。

两种解决办法 #

1. 替换块级元素为内联元素 #

直接把组件里的<p>换成内联元素，比如<span>，这样所有元素都遵循内联布局规则，就能横向排列了：

Vue.component('liste-villes',{
  template: `
    <span>
      <span v-for="ville in villes" :key="ville">
        {{ville}} 
      </span>
    </span>
  `,
  props: ['villes']
})

2. 通过CSS修改块级元素的显示方式 #

如果因为某些原因必须保留<p>标签，那可以给它添加CSS样式，把它改成内联或内联块级元素，让它不再独占一行：

Vue.component('liste-villes',{
  template: `
    <span>
      <p v-for="ville in villes" :key="ville" style="display: inline; margin: 0;">
        {{ville}} 
      </p>
    </span>
  `,
  props: ['villes']
})

这里额外加了margin: 0是因为<p>标签默认有上下外边距，可能会影响布局，按需调整即可。

另外提醒一句：Vue中使用v-for时最好加上:key属性，这是官方推荐的最佳实践，能避免一些不必要的渲染问题哦。

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