英文:
Vue Js Component Syntax
问题
我在Vue JS中创建了一个名为"Component"的组件。我了解到我们可以在父组件模板中像这样使用该组件。
<template>
<p>我是一个标题</p>
<Component/>
</template>
但如果我像HTML DOM元素一样使用Component语法并嵌套更多HTML标记，这实际上是什么意思呢？我对Vue JS还很新，对此一无所知。
<template>
<Component>
<div>
你好，我是一个div
</div>
</Component>
</template>
英文:
I have created a component in Vue JS named "Component". I have learnt that we use the comoponent in a parent component template like this.
<template>
<p>I am a heading </p>
<Component/>
</template>
But if I use the Component syntax like an HTML DOM element syntax and embed more HTML markup inside it, what does it mean actually? I am new to Vue JS and have no idea about this.
<template>
<Component>
<div>
Hello I am a div
</div>
</Component>
</template>
答案1
得分: 1
正如你提到的，有两种使用自定义组件的方式。
通常情况下，如果我们不传递任何子元素，我们会使用自闭合标签组件。
如果你需要传递一个子元素到组件中，你必须使用第二种方法。组件中的子元素被称为插槽。
你可以在这篇文章中了解更多关于插槽，也叫子组件的信息。
英文:
As you mentioned there are two ways of using Custom components.
We usually use the self-closing tag component if we are not passing any child elements
If you need to pass a child to the component you have to use the second method. A child inside a component is called a slot
You can read more about slots aka child components in this article
答案2
得分: 1
HTML标记在Component标签内部进入组件中定义的插槽。
因此，如果Component定义如下所示
<template>
<h1>这是组件的内容</h1>
<slot></slot>
</template>
并在父组件中如下使用
<template>
<Component>
<div>
你好，我是一个div
</div>
</Component>
</template>
那么实际呈现的内容将如下所示
<h1>这是组件的内容</h1>
<div>
你好，我是一个div
</div>
英文:
The HTML markup inside Component tags goes to a slot defined in the component.
So, if Component is defined something like below
<template>
<h1>This is content of component</h1>
<slot></slot>
</template>
and used in parent component as below
<template>
<Component>
<div>
Hello I am a div
</div>
</Component>
</template>
then following will actually be rendered
<h1>This is content of component</h1>
<div>
Hello I am a div
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论