<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 模板。感谢社区。

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 的所有布局规则。没有魔法。

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

<component> in vue always rendering newline

html

css

vue.js

vue-component

vuejs2