Apakah masalah yang diselesaikan oleh slot vue?

Masalah diselesaikan oleh slot vue: Kandungan tidak dibenarkan untuk ditulis di tengah-tengah teg sub-komponen yang diperkenalkan. Slot ialah keupayaan yang disediakan oleh Vue untuk pembungkus komponen; ia membenarkan pembangun untuk menentukan bahagian yang tidak pasti yang dijangka ditentukan oleh pengguna sebagai slot apabila slot pembungkusan boleh dianggap sebagai pemegang tempat untuk kandungan yang dikhaskan untuk pengguna .

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah itu slot?

Kami tahu bahawa dalam vue, kandungan tidak dibenarkan untuk ditulis di tengah-tengah teg sub-komponen yang diperkenalkan. Bagi menyelesaikan masalah ini, pegawai tersebut memperkenalkan konsep slot. Slot

sebenarnya bersamaan dengan pemegang tempat. Ia memberikan templat HTML anda tempat dalam komponen, membolehkan anda menghantar beberapa perkara. Slot dibahagikan kepada slot tanpa nama, slot bernama dan slot berskop.

Anda mungkin tidak faham mengapa saya perlu menghantar HTML ke dalam subkomponen dan bukannya menulisnya terus dalam subkomponen? Jawapannya begini. Anda boleh bayangkan senario di mana anda mempunyai lima halaman Hanya satu kawasan daripada lima halaman mempunyai kandungan yang berbeza Bagaimana anda menulis lima halaman ini. Salin dan tampal adalah satu cara, tetapi dalam vue, slot adalah lebih baik.

Slot tanpa nama

---

Slot tanpa nama, kita boleh panggil slot tunggal atau slot lalai. Berbanding dengan slot yang dinamakan, ia tidak memerlukan atribut nama untuk ditetapkan. (Atribut nama tersembunyinya adalah lalai.)

Contoh:

Direktori fail adalah seperti berikut dan komponen Home ialah komponen induk HelloWorld.

• Tulis slot tanpa nama dalam 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>

• Perkenalkan subkomponen ke dalam komponen Laman Utama dan Tulis kandungan dalam tag subkomponen

<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>

Kesan

Tidak sukar untuk melihat kandungan (bahagian merah) dalam HelloWorld tag mempunyai Ia menunjukkan.

Slot bernama

---

Seperti yang dinyatakan di atas, slot mempunyai atribut nama. Berbanding dengan slot tanpa nama, slot tanpa nama dengan atribut nama ditambah dinamakan slot.

• Dalam komponen HelloWorld, tulis slot yang atribut namanya di kiri dan kanan masing-masing

<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>

• Komponen rumah menulis slot-v pada templat: nama untuk menggunakan slot bernama

<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>

Ambil perhatian bahawa slot v hanya boleh ditambah pada teg templat (dengan satu pengecualian).

• Kesan

• Pengecualian (slot tidak digunakan='name ')
  Slot bernama dengan atribut slot telah ditamatkan sejak 2.6.0 dan vue3.x telah ditamatkan sepenuhnya. Hanya cli sebelum vue3 boleh digunakan.

<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>

Kesannya sama seperti di atas.

• Sedikit pengetahuan tentang slot yang dinamakan
  Seperti v-on dan v-bind, v-slot juga mempunyai singkatan, iaitu menggantikan segala-galanya sebelum parameter (v-slot:) dengan aksara #. Contohnya v-slot:header boleh ditulis semula sebagai #header.

Slot Skop

---

Slot Skop sebenarnya adalah slot yang boleh menghantar data. Jika beberapa data dalam komponen anak hendak digunakan dalam komponen induk, ia mesti melalui kaedah yang ditentukan. Peraturan dicadangkan dalam dokumentasi rasmi bahawa semua kandungan dalam templat induk disusun dalam skop induk. Segala-galanya dalam templat kanak-kanak disusun dalam skop kanak-kanak. **Jika anda menggunakan nilai dalam komponen anak secara langsung dalam komponen induk, ralat akan dilaporkan.

Slot skop slot tanpa nama

Untuk menjadikan data dalam komponen anak tersedia dalam kandungan slot ibu bapa, kami boleh menghantar data sebagai Bind a elemen ciri:

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

• Kod HelloWorld subkomponen

<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>

Ciri yang terikat pada elemen (v-bind:users="user ") dipanggil penyangga slot. Sekarang dalam skop induk, kita boleh menggunakan v-slot dengan nilai untuk menentukan nama prop slot yang kami sediakan.

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

• Kod Laman Utama komponen induk

<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>

Nota:
SlotProps dalam komponen induk boleh dipilih sesuka hati.
Pengguna dalam subkomponen dipilih sesuka hati, sepadan dengan pengguna dalam komponen induk.
Pengguna dalam subkomponen ialah data.

Kesan

Slot skop slot yang dinamakan

adalah sama dengan slot tanpa nama, hanya Anda perlu menggantikan lalai dengan nilai nama slot.

• Kod HelloWorld komponen kanak-kanak

<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>

• Kod Laman Utama komponen induk

<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>

Kesan

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

另，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视频教程

Atas ialah kandungan terperinci Apakah masalah yang diselesaikan oleh slot vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!