vue-插槽作用域的使用

　　父组件想要在自个的模板中使用子组件的data数据，有3种方式：

　　1. 子组件发送事件：主动方是子组件

　　2. 父组件获取子组件的对象，通过this.childredn或refs，但这种方式大多是用在scirpt代码里面，在template模板中并不适用

　　3. 插槽作用域的方式获取，该方式能在template模板中来获取子组件的data数据，主要也是为了讲这个

　　直接解释会比较麻烦，先看代码在解释：

复制代码
<body>
  <div id="app">
    <ccomponent>
      <template slot-scope="slot">
        <h1>{{slot.data}}</h1>
      </template>
    </ccomponent>
  </div>

</body>
<template id="tem">
  <div>
    <slot :data="books"></slot>
  </div>
</template>

<script>
    const ccomponent = {
      data(){
        return {
          books: ['刘沉香舅母','宝莲灯爆了','谁动了我的宝莲洞']
        }
      },
      //data,props,methods,template,component
      template: '#tem'
    }
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        ccomponent
      }
    });
</script>
复制代码

　　大概的步骤是这样的：

　　　　1. 在子组件的slot标签定义一个属性（属性名任意），为该属性绑定子组件中的data数据

　　　　2. 在父组件的template中使用子组件并添加插槽时，一定要被<template>标签所包含，并设置slot-scope属性，slot-scope属性值代表 slot标签，接着获取他slot的属性即可拿到数据

　　注意：在vue2.5以下一定得使用<template>，2.5以后可使用任意标签。

posted @   爱编程DE文兄  阅读(249)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
历史上的今天：
2020-03-26 JavaSE-JVM的内存划分
2020-03-26 JavaSE-逻辑运算符
2020-03-26 JavaSE-数据类型转换
点击右上角即可分享
微信分享提示
SQL AI 助手