vue 自定义组件插槽slot

vue实现了一套内容分发的API，将<slot>元素作为承载分发内容的出口。

先自动以一个按钮组件

<template>
  <div class="hello">
    <button class="primary">
    <!--不仅可以传字符串，还可以传入html-->
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    foo:String
  },
  data(){
    return {
      username:'',
      password:"",
    }
  },
  methods: {
  },
}
</script>
<style scoped>

</style>

插槽的使用

插槽中非props的Attribute中的属性默认被插槽中的根标签继承

<template>
<div>
  <v-button>搜索</v-button>
  <v-button>确定</v-button>
  <v-button>取消</v-button>
  <v-button>
    <span>武汉</span>
    <div>加油</div>
  </v-button>
</div>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    "v-button" :HelloWorld
  },
  data(){
    return{
    }
  },
  methods: {
  },
}
</script>

<style>
</style>

上述就是关于插槽的使用方法，这样写你们可以理解吗？