<!DOCTYPE html>

<html lang='en'>

<head>

 <meta charset='UTF-8'>

 <meta http-equiv='X-UA-Compatible' content='IE=edge'>

 <meta name='viewport' content='width=device-width, initial-scale=1.0'>

 <script src='https://unpkg.com/vue/dist/vue.js'></script>

 <title></title>

</head>

<body>

 <div id='app'>

    <container>

      <template v-slot:header="headerProps">

      {{headerProps.navs}}

      </template>

    </container>

 </div>

 <script>

    Vue.component("container",{

      template:`

      <div>

        <div class="header">

        <slot name="header" :navs="navs"></slot>

        </div>

      </div>

      `,

      data : function(){

        return {

          navs:['你','我','他']

        }

      }

    },)

    new Vue({

     el:'#app',

     data:{

     }

   }

)

</script>

</body>

</html>

　　

vue学习17-插槽作用域的更多相关文章

  1. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  2. vue学习之插槽

    插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...

  3. Vue学习笔记-插槽基本使用

    为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...

  4. vue中插槽作用域的使用

    一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...

  5. Vue学习笔记：Slot

    转自:https://www.w3cplus.com/vue/vue-slot.html 在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽.具名插槽和作用域插槽三种 父组件 ...

  6. VUE学习总结

    VUE学习总结 文档:https://cn.vuejs.org/v2/guide/ Webstorm的一些常用快捷键:1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任 ...

  7. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  8. vue学习的笔记补充

    // vue-router中可以使用 routes:[ { path:'/', name:'index', component:()=>import('./index') } ] // 这种写法 ...

  9. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

随机推荐

  1. UDP&串口调试助手用法（4）

    接收配置用法 概览 保存文件 可将数据保存到文件和文件夹 如果选择的时文件,则需要自己手动选择保存的文件. 如果选择的时文件夹,则需要指定文件夹的类型和文件的后缀 支持保存文件类型: 文本文件和二进制 ...

  2. cmake之错误【Modules/ExternalProject.cmake:3206 (_ep_add_download_command)....】

    本文的 cmake的version是3.18 本文环境: Ubuntu 64 + CMAKE 3.18 错误描述 1.错误内容 Modules/ExternalProject.cmake:3206 ( ...

  3. cmake之Visual studio无法显示头文件

    本文演示cmake版本:3.18 1. 问题 使用cmake创建的Visual Studio 项目都没有显示头文件, 比如: 可以清楚的看见,项目lib_pipe没有显示头文件 2. 配置CMakeL ...

  4. 【LeetCode】941. Valid Mountain Array 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  5. 【LeetCode】875. Koko Eating Bananas 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二分查找 日期 题目地址:https://leetc ...

  6. hdu-1593 find a way to escape(贪心，数学)

    思路:两个人都要选取最优的策略. 先求外层那个人的角速度,因为他的角速度是确定的,再求内层人的当角速度和外层人一样时的对应的圆的半径r1.外层圆的半径为d; 那么如果r1>=外围圆的半径,那么肯 ...

  7. CS5211替代兼容PS8625|DP转LVDS|CS5211设计方案详解

    PS8625是一个DP显示端口 到LVDS转换器芯片,利用GPU和显示端口(DP) 或嵌入式显示端口(eDP) 输出和接受LVDS输入的显示面板.PS8625实现双通道DP输入,双链路LVDS输出.P ...

  8. 编写Java程序，前方有 3km 的道路障碍，4 辆普通车不能通过，必须等到清障车完成作业离开后，才能继续行驶。用程序来模拟这一过程的发生

    查看本章节 查看作业目录 需求说明: 前方有 3km 的道路障碍,4 辆普通车不能通过,必须等到清障车完成作业离开后,才能继续行驶.用程序来模拟这一过程的发生 实现思路: 创建清障车Wrecker类和 ...

  9. gRPC创建Java RPC服务

    1.说明 本文介绍使用gRPC创建Java版本的RPC服务, 包括通过.proto文件生成Java代码的方法, 以及服务端和客户端代码使用示例. 2.创建生成代码工程 创建Maven工程,grpc-c ...

  10. Clover支持目录多标签页

    1.简介 Clover是Windows Explorer资源管理器的一个扩展, 为其增加类似谷歌 Chrome 浏览器的多标签页功能. 2.推荐用法 下面是我使用的Clover的截图: 可以看到同时打 ...