作用域插槽理解与使用

作用域插槽

用于父组件在插槽实例中取到子组件的数据，使用方法如下：

在子组件用冒号+属性的方式传递数据，类似于props传递数据。

<template>
  <div class="hello">
    <slot :data="age"></slot>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      age: "28"
    }
  }
}

在父组件中用slot-scope接收。

<template>
  <div>
    <hello-world>
      <template slot-scope="data">{{data.data}}</template>
    </hello-world>
  </div>
</template>

data可以任意命名。

<template>
  <div>
    <hello-world>
      <template slot-scope="item">{{item.data}}</template>
    </hello-world>
  </div>
</template>

完成数据渲染。自己试试吧！