[vue] Slots in vue und wie man sie verwendet

Mobile 2023-08-27 04:29:29 views: null
16385650:

 Slot

gemeinsamer Steckplatz

1. Durch direktes Aufrufen der Beschriftung der untergeordneten Komponente in der übergeordneten Komponente kann der Inhalt der untergeordneten Komponente gerendert werden. Wenn der Inhalt der Beschriftung der untergeordneten Komponente hinzugefügt wird, wird die übergeordnete Komponente nicht gerendert.

unbenannter Slot (Standardslot)

ChildComponent.vue:

<!--    第一种方式-->
<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot>
    <p>This is content from the child component.</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

2. Wenn die Beschriftung der von der übergeordneten Komponente aufgerufenen untergeordneten Komponente und der Slot in der untergeordneten Komponente Textinhalt enthalten, wird der Inhalt im Slot der untergeordneten Komponente durch den Inhalt in der übergeordneten Komponente überschrieben.

<!--    第二种方式-->
<template>
  <div>
    <h2>Child Component</h2>
    <slot><p>我们一起学猫叫</p></slot>
    <p>This is content from the child component.</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

 ParentComponent.vue：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component>
      <p>This is custom content inside the child component.</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
};
</script>

Im obigen Beispiel ChildComponentverwendet die Komponente einen unbenannten Steckplatz (den Standardsteckplatz). In ParentComponenteiner , indem der Inhalt in <child-component>ein Tag eingeschlossen wird, wird der Inhalt in ChildComponentden Slot der . eingefügt. 

index.js

Nehmen Sie als Beispiel die übergeordnete Komponente als loginnew und die untergeordnete Komponente als hello-world.

<!--父组件loginnew.vue->>
<hello-world></hello-world>
<hello-world>这是个hello-world插槽位</hello-world>
<!--如果想要渲染出父组件中调用子组件标签中的内容，就要在子组件中添加插槽-->
<!--子组件hello-world.vue文件-->
<!--如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容-->
<slot><p>hello-world：我们一起学猫叫</p></slot>

 benannte/benannte Slots

ist eine fortschrittliche Slot-Technologie in Vue.js-Komponenten, die es Ihnen ermöglicht, mehrere benannte Slots in einer Komponente zu definieren, um eine genauere Kontrolle darüber zu erhalten, wo Inhalte für verschiedene Teile eingefügt werden. Durch die Verwendung benannter Slots können Sie unterschiedliche Inhalte an unterschiedliche Slot-Positionen in der übergeordneten Komponente übergeben, um so ein flexibleres und individuelleres Layout und die Wiederverwendung von Komponenten zu erreichen.

Hier ist ein Beispiel mit benannten Slots:

ChildComponent.vue:

<template>
  <div>
    <h2>Child Component</h2>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
};
</script>

ParentComponent.vue：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component>
      <template v-slot:header>
        <p>This is the header content.</p>
      </template>
      <p>This is the main content.</p>
      <template v-slot:footer>
        <p>This is the footer content.</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
};
</script>

Im obigen Beispiel ChildComponentdefiniert die Komponente drei Steckplätze, den Standardsteckplatz und den benannten Steckplatz headerund footer. ParentComponentVerwenden Sie in <template>ein Element mit v-slotder Direktive, um den Inhalt eines benannten Slots zu füllen.

Beachten Sie, dass Vue 2.6.0 und höher eine neue Abkürzungssyntax einführt, die v-slot:headerauf abkürzt #header, damit Sie benannte Slots präziser verwenden können.

Im Beispiel ParentComponentwürde das wie folgt dargestellt werden:

<div>
  <h1>Parent Component</h1>
  <div>
    <h2>Child Component</h2>
    <p>This is the header content.</p>
    <p>This is the main content.</p>
    <p>This is the footer content.</p>
  </div>
</div>

Durch die Verwendung benannter Slots können Sie unterschiedliche Inhalte an unterschiedlichen Slot-Positionen einfügen und so flexiblere und konfigurierbarere Komponenten ermöglichen. Durch benannte Steckplätze lassen sich Ihre Komponenten besser an verschiedene Einsatzszenarien anpassen. 

Übergeordnete Komponente loginNew.vue:

<template>
  <div>
    <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="70px" class="demo-ruleForm"
             :label-position="labelPosition">
      <el-form-item label="用户名" prop="username">
        <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容-->
    <!--  <hello-world>这是个hello-world插槽位</hello-world>-->
    <!--  如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容-->
    <!--  <hello-world></hello-world>-->
    <hello-world>
      <!--    方法二  命名插槽-->
      <!--    在vue2.6之前版本-->
      <p slot="part1">一起喵喵喵</p>
      <!--    在vue2.6之后版本-->
      <template v-slot:part2>
        <p>在你面前撒个娇</p>
      </template>
      <!--       v-slot:可以简写成"#" -->
      <template #part3>
        <p>还是喵喵喵喵</p>
      </template>

      <!--        插槽作用域:父组件调取子组件的插槽内部要获取子组件的属性-->
      <!--        2.6 之前-->
      <p slot="part4" slot-scope="scope">
        {
   
   { scope.user }}我得心脏砰砰跳
      </p>
      <template slot="part5" slot-scope="scope">
        <p>{
   
   { scope.user }}我得心脏砰砰跳aaaaaa</p>
      </template>
      <!--        2.6 之后-->
      <template v-slot:part6="scope">
        <p>{
   
   {scope.user}}都是你的味道</p>
      </template>

      <template v-slot:part7="{user}">
        <p>{
   
   {user}}都是你的味道</p>
      </template>
    </hello-world>

  </div>
</template>

<script>
export default {
  name: "loginNew",
  data() {
    return {
      username: "daxiao",
      password: "123456",
      labelPosition: "right",
      ruleForm: {
        username: "111",
        password: "222",
      }
    }
  },
}
</script>

<style scoped>
.el-form {
  width: 350px;
  margin: 50px auto;
}
</style>

Unterkomponente HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <h>{
   
   { msg1 }}</h>
    <p>这是一个hello-world页面</p>
    <div>
      <el-image
          style="width: 300px; height: 200px"
          :src="url"
          fit="cover"></el-image>
    </div>
    <!--    第一种方式-->
    <!--    <slot></slot>-->
    <!--    第二种方式-->
    <slot><p>我们一起学猫叫</p></slot>
    <!--    第三种方式 命名插槽-->
    <slot name="part1"></slot>

    <slot name="part2"></slot>

    <slot name="part3"></slot>
    <!--    插槽作用域-->
    <slot name="part4" :user="username"></slot>

    <slot name="part5" user="六啊"></slot>

    <slot name="part6" user="七啊"></slot>

    <slot name="part7" user="八啊"></slot>

    <!--    <slot ></slot>-->
  </div>
</template>

<script>
// import axios from 'axios';
import {dogs} from '../api/api'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      url: '',
      username: "木子"
    }
  },
  mounted() {
    //方法一：不推荐
    // axios.get('https://dog.ceo/api/breeds/image/random')
    //     //如果请求成功，就会执行.then回调函数
    //     .then(function (response) {
    //       console.log('data:',response.data)
    //       console.log('response:',response)
    //       //此时的this指的是当前函数的应用
    //       this.url=response.data.message
    //     })
    //     //如果请求失败，就会执行.catch回调函数
    //     .catch(function (err) {
    //       console.log(err)
    //     });
    // axios.get('https://dog.ceo/api/breeds/image/random')
    //     //如果请求成功，就会执行.then回调函数
    //     //方法二：使用箭头函数
    //     .then(response => {
    //       console.log('data:', response.data)
    //       console.log('response:', response)
    //       //此时的this指的是当前函数的应用
    //       this.url = response.data.message
    //     })
    //     //如果请求失败，就会执行.catch回调函数
    //     .catch(function (err) {
    //       console.log(err)
    //     });
    dogs()
        //如果请求成功，就会执行.then回调函数
        //方法二：使用箭头函数
        .then(response => {
          console.log('data:', response.data)
          console.log('response:', response)
          //此时的this指的是当前函数的应用
          this.url = response.data.message
        })
        //如果请求失败，就会执行.catch回调函数
        .catch(function (err) {
          console.log(err)
        });
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Slots mit Gültigkeitsbereich

Es handelt sich um eine fortschrittliche Slot-Technologie in Vue.js-Komponenten, die es übergeordneten Komponenten ermöglicht, Daten an untergeordnete Komponenten zu übergeben und die Rendering-Logik in untergeordneten Komponenten basierend auf diesen Daten anzupassen. Bereichsbezogene Slots ermöglichen es Unterkomponenten, die übergebenen Daten flexibler zu verarbeiten und anzuzeigen, was eine erweiterte Anpassung ermöglicht.

Scoped-Slots eignen sich für die folgenden Situationen:

  • Wenn die übergeordnete Komponente Daten an die untergeordnete Komponente zum Rendern und Verarbeiten innerhalb der untergeordneten Komponente übergeben muss.
  • Wenn eine untergeordnete Komponente die übergebenen Daten in einem anderen Kontext verwenden muss, beispielsweise beim Listenrendering oder bei verschachtelten Komponenten.

Hier ist ein Beispiel mit bereichsbezogenen Slots:

List.vue:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        <slot :item="item" :index="index"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'List',
  props: {
    items: Array
  }
};
</script>

ParentComponent.vue：

<template>
  <div>
    <h1>Parent Component</h1>
    <list :items="dataItems">
      <template v-slot="slotProps">
        <p>Item {
   
   { slotProps.index }}: {
   
   { slotProps.item.name }}</p>
      </template>
    </list>
  </div>
</template>

<script>
import List from './List.vue';

export default {
  name: 'ParentComponent',
  components: {
    List
  },
  data() {
    return {
      dataItems: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

Im obigen Beispiel Listverwendet die Komponente Bereichsslots, um die Daten und den Index jedes Listenelements an den Slot-Inhalt zu übergeben. Verwenden Sie in die Abkürzung ParentComponent, um Bereichsslots über das Element zu definieren und innerhalb des Slots mit den übergebenen Daten zu rendern.<template>v-slot

Das Merkmal des Scope-Slots besteht darin, dass er die Rendering-Logik innerhalb der untergeordneten Komponente an die übergeordnete Komponente übergibt und sich die untergeordnete Komponente nur um die Anzeige der Daten kümmern muss. Dies ermöglicht ein höheres Maß an Wiederverwendung und Anpassung von Komponenten.

 Scoped Slots sind eine sehr leistungsstarke und nützliche Funktion in Vue.js, die Ihre Komponenten flexibler und effizienter machen kann

Ich denke du magst

Origin blog.csdn.net/weixin_43569834/article/details/132295313
Empfohlen
Rangfolge
Täglich
Mehr
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(2)
2024-05-30(0)

Code World

© 2018 codetd.com