Can the name of the named slot of vue be dynamically bound?

1. Child components:
clipboard.png

2.:
clipboard.png

3.:

clipboard.png

this is not successful, but I want to achieve the effect of clicking on different tags and inserting different content. How can I achieve that?
= ("Mr." *)

Vue.js
Mar.05,2021

Hello, landlord. I wrote a Demo, that can be dynamically bound. Here is my Demo code.

< H2 > parent component < / H2 > 
<template>
  <div>
    <slot_>
      <h1 :slot="name">hello world!</h1>
    </slot_>
    <button @click="change">click</button>
  </div>
</template>

<script>
import slot_ from './slot.vue'
export default {
    components: { slot_ },
    data(){
      return {
        name: '',
        status: false
      }
    },
    mounted(){
      this.name = 'h1'
    },
    methods: {
      change(){
        this.name = this.status 
          ? 'h1' : 'h2';
        this.status = !this.status;
      }
    }
}
</script>
<style>
*{margin: 0}
</style>
< H2 > subcomponents < / H2 > 
<template>
  <div>
      <div class="header">
          <slot name="h1"></slot>
      </div>
      <div class="footer">
          <slot name="h2"></slot>
      </div>
  </div>
</template>
<style scoped>
.header{
    background-color: pink;
    width: 200px;
    height: 60px;
}
.footer{
    width: 200px;
    height: 60px;
    background-color: green;
}
</style>

Previous: How to solve several questions in javascript telephone interview?

Next: Do you have vue's rich text with formula, that is, the formula in the subject of mathematics, physics and chemistry?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu