Vue Js 组件语法

huangapple go评论65阅读模式
英文:

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>

huangapple
  • 本文由 发表于 2023年4月17日 15:51:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76032826.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定