Vue는 언제 슬롯을 사용해야 합니까?

사용 시나리오: 슬롯을 통해 사용자는 구성 요소를 더 잘 재사용하고 사용자 정의할 수 있습니다. 상위 구성 요소가 재사용된 구성 요소를 사용하는 경우 구성 요소를 가져옵니다. 다른 위치에 몇 가지 변경 사항이 있으므로 구성 요소를 다시 작성하는 것은 현명하지 않습니다. 레이아웃 구성 요소, 테이블 열, 드롭다운 선택, 팝업 상자 표시 콘텐츠 등과 같은 다양한 시나리오에서 재사용 가능한 구성 요소의 적용을 완료하려면 슬롯을 통해 구성 요소 내부의 지정된 위치에 콘텐츠를 전달합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

slot이란 무엇입니까

---

웹 구성 요소 기술 제품군의 일부인 HTML의 slot 요소는 웹 구성 요소 내의 자리 표시자입니다slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个栗子

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})

在Vue中的概念也是如此

Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）

使用场景

---

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

分类

---

slot可以分来以下三种：

• 默认插槽

• 具名插槽

• 作用域插槽

默认插槽

子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

子组件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父组件

<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

子组件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父组件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

小结：

• v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用

• 默认插槽名为default，可以省略default直接写v-slot

• 缩写为#时不能不写参数，写成#default

• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

  The 자리 표시자는 나중에 자신의 마크업 언어로 채울 수 있습니다

예를 들어

rrreee템플릿은 페이지에 표시되지 않으므로 먼저 해당 참조를 가져온 다음 에 추가해야 합니다. >DOM , rrreee

의 개념은 Vue🎜🎜Slot에서도 동일합니다. 예명 슬롯, 꽃 이름은 "구덩이를 차지합니다", 우리는 솔트가 구성 요소 템플릿에서 위치를 점유하면 이 구성 요소 태그를 사용하면 구성 요소 태그의 콘텐츠가 배포된 콘텐츠를 전달하기 위한 출구로 자동으로 슬롯을 채웁니다(구성 요소 템플릿의 슬롯 위치 대체). 카드형 FC 게임 콘솔에 비해 게임 콘솔은 카드 슬롯(슬롯)을 노출하여 사용자가 다양한 게임용 마그네틱 스트립(맞춤형 콘텐츠)을 삽입할 수 있습니다. 🎜🎜🎜사용 시나리오 🎜🎜🎜🎜슬롯을 통해 사용자는 더 나은 컴포넌트 재사용 및 작업 수행 맞춤형 처리🎜🎜상위 컴포넌트가 재사용된 컴포넌트를 사용하는 경우, 다른 위치에서 약간의 변경 사항이 있는 경우 컴포넌트를 다시 작성하는 것은 현명하지 않습니다.🎜🎜 슬롯 레이아웃 구성 요소, 테이블 열, 드롭다운 선택, 팝업 상자 표시 콘텐츠 등과 같은 다양한 시나리오🎜🎜에서 이 재사용 가능한 구성 요소의 적용을 완료하려면 내부 지정된 위치에 콘텐츠를 전달하세요.🎜🎜🎜분류🎜🎜 🎜🎜슬롯은 다음 세 가지 유형으로 나눌 수 있습니다.🎜

• 🎜기본 슬롯🎜🎜
• 🎜이름이 지정된 슬롯🎜🎜
• 🎜스코프 슬롯 🎜🎜🎜🎜🎜기본 슬롯🎜🎜🎜 하위 구성 요소는 태그를 사용하여 렌더링 위치를 결정할 수 있습니다. 태그에 부모 컴포넌트를 사용하면 슬롯으로 이동하지 않고 콘텐츠를 전달하면 태그의 DOM 구조가 페이지에 표시됩니다.🎜🎜부모 컴포넌트를 사용하는 경우 하위 구성 요소의 태그에 직접 콘텐츠🎜🎜Child.vue🎜rrreee🎜상위 구성 요소🎜rrreee🎜🎜 명명된 슬롯🎜🎜🎜하위 구성 요소는 슬롯의 이름을 나타내는 name 속성으로 기본 슬롯으로 전달되지 않습니다🎜🎜상위 컴포넌트에서 사용하는 경우 기본 슬롯을 기준으로 슬롯 속성이 추가되며 그 값은 하위 컴포넌트의 값이 됩니다. 슬롯 이름 속성🎜🎜하위 구성 요소 Child.vue🎜rrreee🎜부모 구성 요소🎜rrreee🎜🎜함수 도메인 슬롯🎜🎜🎜하위 구성 요소는 하위 구성 요소 정보를 상위 구성 요소에 전달하는 범위입니다. 이러한 속성은 상위 구성 요소 v-slot🎜🎜Parent 구성 요소에서 허용하는 개체에 적용됩니다. 사용 시 v-slot을 통해 하위 구성 요소의 정보를 얻습니다. #), 🎜🎜하위 구성 요소 Child.vue🎜rrreee🎜부모 구성 요소🎜rrreee🎜🎜를 사용합니다. 요약: 🎜🎜
  • 🎜v- 슬롯 속성은 <template>에서만 사용할 수 있지만 기본 슬롯만 있는 경우에만 사용할 수 있습니다. 🎜🎜
  • 🎜을 사용하세요. 기본 슬롯 이름은 default입니다. 는 컴포넌트 라벨에 default를 생략하고 v-slot🎜🎜
  • 🎜약어가 #인 경우 매개변수를 반드시 적어야 합니다. as #default🎜🎜
  • 🎜해체를 통해 v-slot={user}를 얻을 수 있으며, 이름을 v-slot="로 바꿀 수도 있습니다. {user: newName}" 및 기본값 정의 v-slot="{user = 'default value'}"🎜🎜🎜🎜관련 권장 사항: 🎜vue.js 비디오 튜토리얼🎜 🎜

위 내용은 Vue는 언제 슬롯을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!