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的呈现规则进行渲染的。如果组件的根标签是块元素，那么它将在下一行上呈现。如果它是内联元素，那么它将以内联方式呈现。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

console.clear()

const Newline = {
  template: `<div style="display: inline">This is on the same line</div>`
}

new Vue({
  el: "#app",
  components: {
    Newline,
  }
})

＆＃13;

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

＆＃13;

Vue呈现的HTML遵循您手写的HTML的所有布局规则。没有任何魔力。

vue中的<component>始终呈现换行符

1 个答案: