[vue] 作用域插槽

[david2tdw]

[vue] 作用域插槽

[david2tdw]

1. 注意检查vue的版本。
2. v-slot属性要用在template元素上。
3. <slot slot="footer">
4. <template v-slot:default>

[david2tdw]

testSlot.vue

<template>
  <slot-example>
    <template slot="header">
      <div @click="test">标题 click me</div>
    </template>
    <template v-slot:default>
      <text style="color:red">插槽内可以包含任何模板代码，包括 HTML, slot必须是根节点</text>
      <div v-for="(item,index) in dataList" :key="index">
        <div>{{item.name}}c</div>
      </div>
    </template>

    <slot slot="footer">
      <div>this is outter footer</div>
    </slot>

    <template v-slot:aslot="{ pUser, pMsg}">
      <h3>v-slot 作用域插槽 获取插槽内绑定的变量值</h3>
      <div>{{pUser}} {{pMsg}}</div>
    </template>

    <!-- <template v-slot:aslot="prop">
      <h3>v-slot 作用域插槽 获取插槽内绑定的变量值</h3>
      <div>
        {{prop}}
      </div>
    </template>-->

    <template slot="scopeSlot" slot-scope="slotProp">
      <div>{{slotProp}}</div>
    </template>
  </slot-example>
</template>

<script>
import slotExample from '@/components/slot1.vue'
export default {
  data () {
    return {
      user: {
        firstName: 'tdw',
        lastName: 'tdw-last'
      },
      dataList: [{
        name: 'xxx'
      }, {
        name: 'bbbb'
      }, {
        name: 'bbbb'
      }, {
        name: 'ff'
      }, {
        name: 'bbbggb'
      }, {
        name: 'hh'
      }, {
        name: 'ss'
      }]
    }
  },
  methods: {
    test () {
      console.log('outer test')
    },
    onReachBottom () {
      console.log('bottom.')
    }
  },
  components: {
    slotExample
  }
}
</script>

<style>
</style>

[david2tdw]

slot1.vue

<template>
  <div>
    <div>我是子组件</div>
    1. ------
    <slot name="header">
      <div>slot header</div>
    </slot>
    2. ------
    <slot>
      <div>slot default</div>
    </slot>
    3. ------
    <slot name="footer">
      <div>default footer</div>
    </slot>
    4. ------
    <slot name="other">
      <div @click="test">default other</div>
    </slot>
    5. ------
    <slot name="aslot" :pUser="user" :pMsg="msg">
      <div>{{user.lastName}}</div>
    </slot>
    6. ------
    <slot name="scopeSlot" :user="user">
      <div>{{user}}</div>
    </slot>

  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        name: 'inner username',
        firstName: 'tdw',
        lastName: 'tdw-last333'
      },
      msg: {
        info: 'inner msg info'
      }
    }
  },
  methods: {
    test () {
      console.log('slot test')
    },
    onReachBottom () {
      console.log('slot bottom.')
    }
  }
}
</script>

<style>
</style>