三分钟了解vue中slot插槽的写法

哈哈哈，上代码

//子组件
<template>
  <div>
    <slot name="header">我是header</slot><!-- 具名插槽 -->

    <p><slot>default</slot></p><!-- 匿名/默认/缺省插槽 -->

    <slot name="footer">我是footer</slot>

    <slot name="sendmes" :mess="mess"></slot><!-- 作用域插槽 -->

    
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      title: "title",
      mess:"传送数据"
    };
  },
  components: {},
  methods: {
    getList() {},
  },
};
</script>

<style lang="stylus" scoped></style>



//父组件
<template>
  <div id="app">

    <!-- <myProp title="stylsssss" age="20" @aaa="getaaa" />
    <div>{{ current }}</div>子传父 -->
    <vue-slot>
      <template v-slot:header>
        <p>header</p>
      </template>
      <template #footer>footer</template><!-- #缩写 == v-slot: -->
      <template #sendmes="getmess"><p>{{getmess.mess}}</p></template>
    </vue-slot>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import myProp from "./components/myProp";
import VueSlot from "./components/VueSlot"


export default {
  name: "App",
  components: {
    // HelloWorld,
    // myProp,
    VueSlot
  },
  data() {
    return {
      current: "",
    };
  },
  methods: {
    getaaa(data) {
      this.current = data;
    },
  },
};
</script>

<style>
</style>

效果图