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

Posted 2023-02-23

【中文标题】<component> 在 vue 中总是渲染换行符

【英文标题】：<component> in vue always rendering newline

【发布时间】：2017-11-20 12:49:05

【问题描述】：

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

<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>

【问题讨论】：

“Vue 存储 css 模板的位置”是什么意思？

【参考方案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 的所有布局规则。没有魔法。

【讨论】：

谢谢，在我的情况下，它更加复杂，因为我在电子应用程序中使用它并且嵌套/凌乱的 css 范围...... >