Apakah masalah yang diselesaikan oleh slot vue?-Soal Jawab bahagian hadapan-php.cn

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 .

Apakah masalah yang diselesaikan oleh slot vue?

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.

Apakah masalah yang diselesaikan oleh slot vue?

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.

Apakah masalah yang diselesaikan oleh slot vue?

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>

Salin selepas log masuk

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

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

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

Salin selepas log masuk

Kesan

Apakah masalah yang diselesaikan oleh slot vue?

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>

Salin selepas log masuk

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

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>name属性为left</h1> 
      </template>
      <template>
         <h1>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>

Salin selepas log masuk

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

Kesan

Apakah masalah yang diselesaikan oleh slot vue?

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>name属性为left</h1>  
      <h1>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>

Salin selepas log masuk

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"

Salin selepas log masuk

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>

Salin selepas log masuk

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="随意取的名字"

Salin selepas log masuk

Kod Laman Utama komponen induk

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>{{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>

Salin selepas log masuk

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

Apakah masalah yang diselesaikan oleh slot vue?

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>

Salin selepas log masuk

Kod Laman Utama komponen induk

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>{{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>

Salin selepas log masuk

Kesan

Apakah masalah yang diselesaikan oleh slot vue?

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

Apakah masalah yang diselesaikan oleh slot vue?

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

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

解构插槽 Prop

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

Home组件

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>{{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>

Salin selepas log masuk

效果

Apakah masalah yang diselesaikan oleh slot vue?

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

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>{{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>

Salin selepas log masuk

效果如上图。

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

<template>
  <div>
    我是Home父组件
    <helloworld>
      <template>
         <h1>{{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>

Salin selepas log masuk

使用场景

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

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

Salin selepas log masuk

使用的ui框架为ivew。