作用域插槽slot

通常,插槽內使用的屬性,使用的是引用組件的組件的屬性值。
在這裏插入圖片描述

<template>
  <div>
    <child v-model="value">
        <span>{{value}}</span>
    </child>
  </div>
</template>

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

<style>
</style>
<template>
  <div :style="style">
    <slot></slot>
  </div>
</template>

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

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