vue组件学习-slot中的 scope

全栈开发学习

于 2018-08-21 17:35:26 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue学习组件

本文链接：https://blog.youkuaiyun.com/he_1992/article/details/81911649

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

vue学习

1 篇文章

订阅专栏

组件

1 篇文章

订阅专栏

本文介绍了如何在Vue组件中利用slot的scope特性，从子组件向父组件传递数据。通过在父组件的template标签中定义scope，可以将子组件的属性值msg作为临时变量进行访问，强调了在使用此方法时，父组件的template属性不能省略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="app">
  <child-component>
    <template scope="props">
      <p>来自父组件的内容</p>
      <p>{{props.msg}}</p>
    </template>
  </child-component>
</div>

Vue.component('child-component', {
    template: '<div><div><slot msg="获取子组件的内容"></slot></div></div>'
  })
  var app = new Vue({
    el: '#app'
  })

显示结果：
来自父组件的内容

获取子组件的内容

说明：
子组件 slot 属性 msg 如何传递给父组件
通过父组件的 template 标签中 scope 定义一个插槽
相当于临时变量通过 props.msg 获取子组件属性值
主要父组件 template 属性不能去掉