scoped slot插槽模板使用的屬性是組件中的屬性

如果希望插槽模板中使用的屬性是組件中的屬性時,就用到了 scoped slot。在這裏插入圖片描述

<template>
  <div>
      <child>
          <h1 slot="asd"  slot-scope="props">{{props.value}}</h1>
          <h2 slot="dsa" slot-scope="props">{{props.aaa}}</h2>  
      </child>
  </div>
</template>

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

<style>

</style>
<template>
  <div :style="style">
      <slot name="asd" :value="value" aaa="111"></slot>
      <slot  name="dsa" :value="value" aaa="111"></slot>
  </div>
</template>

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

<style>

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