基本使用

子组件声明： <slot> 占位
父组件使用：<MyButton>（文本、HTML、组件）</MyButton>

MyButton.vue

<template>
  <button>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

App.vue

<template>
  <div>
    <my-button>
      Hello<span>World</span>
    </my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';
export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>

Untitled

填充默认值

MyButton.vue

<template>
  <button>
    <slot>Lance</slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

App.vue

<template>
  <div>
    <my-button></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';
export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>

Untitled

DEMO - Loading 组件

把 fontawesome 放进 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <link href="<https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css>" rel="stylesheet">
</head>
<body>
  ...
</body>
</html>

App.vue 中测试j

<template>
  <div>
    <my-button>
      <span class="fa fa-spinner fa-spin"></span>
    </my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';
export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>

在转的 loading 图标