美文网首页
卡槽调用子组件的数据

卡槽调用子组件的数据

作者: hiram_hu | 来源:发表于2019-05-08 10:25 被阅读0次

子组件child:
<template>

  <div class="child">

    <h3>这里是子组件</h3>

    // 作用域插槽

    <slot  :data="data"></slot>

  </div>

</template>

export default {

    data: function(){

      return {

        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']

      }

    }

}

父组件father:

<template>

  <div class="father">

    <h3>这里是父组件</h3>

    <child>

      <template slot-scope="user">

        <ul>

          <li v-for="item in user.data">{{item}}</li>

        </ul>

      </template>

    </child>

  </div>

</template>

相关文章

网友评论

      本文标题:卡槽调用子组件的数据

      本文链接:https://www.haomeiwen.com/subject/rropoqtx.html