<component> in vue常にnewlineをレンダリング

Question

いつも私のメインアプリにタグを挿入するたびに常に新しい行が表示されますが、インラインにすることはできませんか？それは、インラインできるように、私は、少なくとも表示するために、コンポーネントに小道具として接頭辞This is a component :を挿入することができます。もちろん、

This is a component : 
component content 

、それはです：代わりに

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

結果：私はこのような何かを達成したいです必ずしもそうではありませんでした..

コンポーネントの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あなたの手の書き込みのすべてのレイアウト規則に従います。魔法は必要ありません。