vue 里面的【克莱因瓶】

在数学领域中，克莱因瓶（Klein bottle）是指一种无定向性的平面，比如2维平面，就没有“内部”和“外部”之分。

• 看到 vue 的 v-slot 时突然觉得和克莱因瓶有相似之处
  > 父组件可以通过 props 传值子组件
  > 子组件可以通过 v-slot 传值父组件的子组件内
  > slot 区块即存在于父组件，同时也处于子组件

父组件

• HelloWorld.vue

<template>
  <div class="hello-world">
    <hello #default="{ text }">
      {{ text }}
    </hello>
  </div>
</template>

<script>
import Hello from './Hello'
export default {
  name: 'HelloWorld',
  components: {
    Hello
  },
}
</script>

子组件

• Hello.vue

<template>
  <div class="hello">
    <slot :text="world"></slot>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data() {
    return {
      world: 'hello world',
    }
  }
}
</script>

效果

• 还有什么也比较有意思的程序代码呢