vue 具名插槽的名字可以动态绑定吗

Question

1.子组件：

2.父组件：

3.描述：
我尝试在父组件里面动态绑定插槽的名字

这样是不成功的，但是我想实现点击不同的标签，插入不同的内容那样的效果，请问怎么实现？
ε=(´ο｀*)))

Answer 1

楼主你好，我写了个Demo，可以实现动态绑定的呀，以下是我的Demo代码。

父组件

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

子组件

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

Answer 2

楼主解决了，可以尝试使用jsx，但是我这边没搞定