Vue 슬롯은 어떤 문제를 해결합니까?

vue 슬롯으로 해결된 문제: 도입된 하위 구성 요소 태그 중간에 콘텐츠를 쓸 수 없습니다. 슬롯은 컴포넌트 패키저를 위해 Vue에서 제공하는 기능입니다. 이를 통해 개발자는 컴포넌트 패키징 시 사용자가 슬롯으로 지정할 것으로 예상되는 불확실한 부분을 정의할 수 있습니다. .

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

슬롯이란 무엇인가요?

vue에서는 도입된 하위 구성 요소 태그 중간에 콘텐츠를 작성할 수 없다는 것을 알고 있습니다. 이런 문제를 해결하기 위해 관계자는 슬롯이라는 개념을 도입했다.

슬롯은 실제로 자리 표시자와 동일합니다. 이는 HTML 템플릿을 구성 요소에 배치하여 일부 항목을 전달할 수 있도록 합니다. 슬롯은 익명 슬롯, 이름이 지정된 슬롯 및 범위가 지정된 슬롯으로 나뉩니다.

HTML을 하위 구성 요소에 직접 작성하는 대신 하위 구성 요소에 HTML을 전달해야 하는 이유를 잘 이해하지 못하실 수도 있나요? 대답은 이것입니다. 다섯 페이지 중 한 영역에만 내용이 다른 경우를 상상해 보세요. 이 다섯 페이지를 어떻게 작성하시겠습니까? 복사하여 붙여넣기는 단방향이지만 vue에서는 슬롯이 더 좋습니다.

익명 슬롯

---

익명 슬롯, 단일 슬롯 또는 기본 슬롯이라고 부를 수 있습니다. 명명된 슬롯과 달리 이름 속성을 설정할 필요가 없습니다. (숨겨진 이름 속성은 기본값입니다.)

예:

파일 디렉터리는 다음과 같으며, Home 구성 요소는 HelloWorld의 상위 구성 요소입니다.

• HelloWorld에 익명 슬롯 쓰기

<template>
  <div>
     Helloworld组件

     <div>
       <slot></slot>
     </div>

  </div>
</template>

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:100%;
  height:300px;
  background:#ccc;
  margin-top:50px;
  .slotTxt{
    width:500px;
    height:200px;
    margin:30px auto;
    background:red;
  }
}
</style>

• Home 구성 요소에 하위 구성 요소를 도입하고 하위 구성 요소 태그에 내용을 작성합니다.

<template>
  <div>
    我是Home父组件
    <helloworld>
      <!-- 没有插槽，这里的内容不显示 -->
      <h1 id="我是helloworld中的插槽啊">我是helloworld中的插槽啊</h1>  
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>

효과

보기 어렵지 않습니다. , HelloWorld 태그의 내용(빨간색 부분)이 표시되었습니다.

이름이 지정된 슬롯

---

위에서 언급했듯이 슬롯에는 이름 속성이 있습니다. 익명 슬롯과 달리 이름 속성이 추가된 익명 슬롯은 명명된 슬롯입니다.

• HelloWorld 구성 요소에서 이름 속성이 각각 왼쪽과 오른쪽인 슬롯을 작성합니다.

<template>
  <div>
     Helloworld组件

     <div>
       <slot></slot>
     </div>

     <div>
       <slot></slot>
     </div>

  </div>
</template>

<script>
export default {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    float:left;
    background:red;
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>

• Home 구성 요소는 템플릿에 v-slot:name을 작성하여 명명된 슬롯을 사용합니다.

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="name属性为left">name属性为left</h1> 
      </template>
      <template>
         <h1 id="name属性为right">name属性为right</h1> 
      </template>
     
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

v-slot만 템플릿 태그에 추가할 수 있습니다(한 가지 예외 있음). ㅋㅋㅋ vue3 이전의 cli만 사용할 수 있습니다.

<template>
  <div>
    我是Home父组件
    <helloworld>
      <h1 id="name属性为left">name属性为left</h1>  
      <h1 id="name属性为right">name属性为right</h1>  
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

효과는 위와 같습니다.

• 이름이 지정된 슬롯에 대한 팁
v-on 및 v-bind와 마찬가지로 v-slot에도 매개변수(v-slot:) 앞의 모든 항목을 # 문자로 바꾸는 약어가 있습니다. 예를 들어 v-slot:header는 #header로 다시 작성할 수 있습니다.

• 스코프 슬롯
  

스코프 슬롯은 실제로 데이터를 전달할 수 있는 슬롯입니다. 하위 구성요소의 일부 데이터를 상위 구성요소에서 사용하려면 지정된 메소드를 통해 전달해야 합니다. **상위 템플릿의 모든 콘텐츠가 상위 범위에서 컴파일된다는 규칙이 공식 문서에 제안되어 있습니다. 하위 템플릿 내부의 모든 내용은 하위 범위에서 컴파일됩니다. **하위 구성요소의 값을 상위 구성요소에서 직접 사용하면 오류가 보고됩니다.

• 익명 슬롯의 범위 슬롯
  

하위 구성 요소의 데이터를 상위 슬롯 콘텐츠에서 사용할 수 있도록 하기 위해 데이터를 요소의 기능으로 바인딩할 수 있습니다.

语法：v-bind:users="user"

하위 구성 요소 HelloWorld 코드

<template>
  <div>
     Helloworld组件  
     <div>
       <slot></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:&#39;oralinge&#39;,
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>

는 슬롯 소품이라고 불리는 요소(v-bind:users="user")에 바인딩됩니다. 이제 상위 범위에서 v-slot을 값과 함께 사용하여 우리가 제공하는 슬롯 prop의 이름을 정의할 수 있습니다.

---

语法：v-slot:default="随意取的名字"  // default可省略，简写为v-slot="随意取的名字"

상위 구성 요소 홈 코드

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="slotProps-users-name">{{slotProps.users.name}}</h1> 
      </template>
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

참고:

상위 구성 요소의 SlotProps는 마음대로 가져올 수 있습니다.

하위 구성 요소의 사용자는 마음대로 선택되며 상위 구성 요소의 사용자에 해당합니다.

하위 구성 요소의 사용자는 데이터입니다.

• Effect

• 네임드 슬롯

의 범위 슬롯은 익명 슬롯과 동일합니다. 기본값을 슬롯의 이름 값으로 바꾸시면 됩니다.


하위 컴포넌트 HelloWorld 코드

<template>
  <div>
     Helloworld组件  
     <div>
       <slot></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:&#39;hello world&#39;,
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>

부모 컴포넌트 홈 코드

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="slotProps-users-name">{{slotProps.users.name}}</h1> 
      </template>
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

Effect

注意：
     默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。

另，slot-scope写法在2.6之后已废弃，作用与上面相同，在此不做解释。

上面的写法是不是觉得有些麻烦？别着急，我们来看一看解构插槽 Prop。

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop。

语法：v-slot="{ users }"

• HelloWold组件

<template>
  <div>
     Helloworld组件  
     <div>
       <slot></slot>
     </div> 
     
  </div>
</template>

<script>
export default {
  data(){
    return{
      user:{
        name:&#39;hello world&#39;,
        age:18
      }
    }  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.hello{
  width:700px;
  height:300px;
  background:#ccc;
  margin: 0 auto;
  margin-top:50px;
  .slotLeft{
    width:300px;
    height:200px;
    // float:left;
    background:red;
    margin:20px auto
  }
  .slotRight{
    width:300px;
    height:200px;
    float:right;
    background:pink;
  }
}
</style>

• Home组件

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="users-name">{{users.name}}</h1> 
      </template>
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

• 效果
  

• 重命名----更改users这个名字

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="person-name">{{person.name}}</h1> 
      </template>
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

效果如上图。

• 定义后备内容，用于插槽 prop 是 undefined 的情形
  此处按照官方文档的写法会出现语法报错，后期应该会修复（有知道的麻烦通知一声）。

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1 id="users-name">{{users.name}}</h1> 
      </template>
    </helloworld>
  </div>
</template>

<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HelloWorld
  }
}
</script>
<style>
.home{
  width:900px;
  margin:0 auto;
  background:yellow;
  padding-bottom:100px;
}
</style>

使用场景

---

• 复用公共组件
  代码示例如下：

<template>
  <div>
    <div>
      <span>{{title}}</span>
      <div>
        <slot></slot>
      </div>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>
<style>
.title-box {
  padding: 16px 0;
  border-bottom: 1px solid #eff1f5;
  .title {
    font-family: MicrosoftYaHei;
    font-size: 24px;
    color: #283039;
    letter-spacing: 0;
    line-height: 24px;
    &::before {
      width: 4px;
      margin-right: 20px;
      content: "";
      background-color: #5da1ff;
      display: inline-block;
      height: 20px;
      vertical-align: middle;
    }
  }
  .right {
    float: right;
    margin-right: 20px;
  }
}
</style>

使用的ui框架为ivew。

相关推荐：vue.js视频教程

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