vue 作用域插槽

1、示例代码

<template>
    <div class="parent">
        <child>
            <template slot-scope="a">
                <p>hello from parent</p>
                <p>{{ a.say }}</p>
            </template>
        </child>
    </div>
</template>
<script>
    import Vue from 'vue'
    Vue.component('child', {
        template: '
        <div class = "child" > 
            <slot say = "hello from child" > < /slot>
            </div>'         
    });
    export default {
        data() {
            return {
            }
        },
        methods: {
        }
    }
</script>

2、效果

3、说明

渲染子组件的内容，将子组件数据传递到插槽。

 

子组件：

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      data: ['空空如也', '悟空', '成都', '七月上', '病变', '走马']
    }
  }
}
</script>

父组件：

<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <slot-scope-child>
        <template slot-scope="user">
            <ul>
                <li v-for="(item, index) in user.data" :key="index">{{item}}</li>
            </ul>
        </template>
    </slot-scope-child>
    <slot-scope-child>
        <template slot-scope="user">
                <h2 v-for="(item, index) in user.data" :key="index">{{item}}</h2>
        </template>
    </slot-scope-child>
  </div>
</template>
<script>
import SlotScopeChild from './b'
export default {
  components: {
    SlotScopeChild
  }
}
</script>
<style scoped>
</style>