slot 插槽 簡單使用

<template>
  <div>
    <comp-one v-model="value" :aaa="value">
      <span>this is content</span>
      <div>hahah</div>
    </comp-one>
  </div>
</template>

<script>
import slotDemo from "./components/slotDemo.vue";
export default {
  components: {
    CompOne: slotDemo
  },
  data() {
    return {
      value: "123"
    };
  }
};
</script>

<style>
</style>
<template>
  <div>
    <!-- <div>{{aaa}}</div> -->
    <div :style="style">
      <div>{{aaa}}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    aaa: String
  },
  data() {
    return {
      style: {
        width: "200px",
        height: "200px",
        border: "1px solid #aaa"
      }
    };
  }
};
</script>

<style>
</style>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章