<component> 在 vue 中总是渲染换行符

Question

每次我在我的主应用程序中插入标签时，它总是呈现一个新行，它不能是内联的吗？我想实现这样的目标：

<p>This is a component :<component></component></p>
<!--worked with other html tags-->

结果：

This is a component :
component content

当然，我可以在组件中插入前缀 This is a component : 作为道具，这样它就可以内联，至少用于显示，但这并不总是我想要的......

我也想知道 Vue 在哪里存储组件的 css 模板。 感谢社区。​​p>

Answer 1

您的组件未在新行上呈现。它基于 HTML 的渲染规则进行渲染。如果你的组件的根标签是一个块元素，那么它将在下一行呈现。如果它是一个内联元素，那么它将被内联渲染。

console.clear()

const Inline = {
  template: `<span>This is inline</span>`
}

const Newline = {
  template: `<div>This is on a new line</div>`
}

new Vue({
  el: "#app",
  components: {
    Inline,
    Newline
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <p>This is an inline component:
    <component is="Inline"></component>
  </p>
  <p>This is a block component:
    <component is="Newline"></component>
  </p>
</div>

在上面的例子中，Inline 组件的根标签是span。跨度是内联元素。 Newline 组件的根标签是div。 div 是块级元素，文本在下一行。

您还可以在 div 上使用 display: inline 并导致组件内联呈现。

console.clear()

const Newline = {
  template: `<div style="display: inline">This is on the same line</div>`
}

new Vue({
  el: "#app",
  components: {
    Newline,
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <p>This is a block component that displays inline:
    <component is="Newline"></component>
  </p>
</div>

Vue 渲染的 HTML 遵循你手写的 HTML 的所有布局规则。没有魔法。