vue 插槽slot向父组件传值

子组件,里面有slot插槽,并在slot上绑定了text值

    <template>
      <div>
        <slot name="icon" :text="text"></slot>
      </div>
    </template>
    <script>
      export default{
        data(){
          return {
            text:"我是子组件"
          }
        }
      }
    </script>

父组件通过slot-scope就可以拿到子组件slot上绑定的值,并且2.5.0版本可以用于任意元素上

    <template>
      <div id="app">
        <car v-model="index">
          <!-- 这里的 data 是个形参,可以随便写 -->
          <div slot="icon" slot-scope="data">
            {{data.text}}
          </div>
        </car>    
      </div>
    </template>

这样,就可以拿到子组件里面的text值。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【2019-3-4更新】Vue 2.6+修改了部分语法,对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 10,330评论 2 36
  • 最近忙着写一些组件,关于插槽这一块自己还是用着 slot 和 slot-scope,然后看了一下文档的更新,于是又...
    费莱姆阅读 945评论 0 7
  • 传递静态或动态Prop 传入静态的值: 这时候值是一个字符串你也可以通过v-bind动态赋值: 这时候值是一个js...
    A郑家庆阅读 404评论 0 0
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,541评论 0 13
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,773评论 1 17