<!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. 【LeetCode】21. Merge Two Sorted Lists 合并两个有序链表

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:合并,有序链表,递归,迭代,题解,leetcode, 力 ...

  2. 【九度OJ】题目1198：a+b 解题报告

    [九度OJ]题目1198:a+b 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1198 题目描述: 实现一个加法器,使其能 ...

  3. POJ 3264：Balanced Lineup（区间最值查询ＳＴ表＆线段树）

      Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 75294   Accepted: 344 ...

  4. 使用pypy3加速python运行

    从这里下载对应OS版本的安装包 解压: tar xf pypy-x.y.z.tar.bz2 然后通过./pypy-x.y.z/bin/pypy可以直接进入console 可以使用pip安装包: ./p ...

  5. 使用 IE 或Chrome等浏览器，通过网络抓包的形式，查看发送请求时的网络

    要求: 使用 IE 或Chrome等浏览器,通过网络抓包的形式,查看发送请求时的网络 实现步骤: 1.打开 IE 浏览器,选择"开发者工具",切换到"网络"标签 ...

  6. bat文件调用cmd命令批量提取文件夹中的文件名（批量修改文件扩展名）

    前言: 在平时的工作中,经常需要批量统计文件和数据,如果逐个统计的话太耗时,而且容易出错那么有没有什么快速的方法呢,这里给大家介绍一种简单高效的方法. 方法: 1.打开CMD命令: 按下 Ctrl+R ...

  7. 编写Java程序，模拟教练员和运动员出国比赛场景，其中运动员包括乒乓球运动员和篮球运动员。教练员包括乒乓球教练和篮球教练。为了方便出国交流，根乒乓球相关的人员都需要学习英语。

    需求说明: 模拟教练员和运动员出国比赛场景,其中运动员包括乒乓球运动员和篮球运动员.教练员包括乒乓球教练和篮球教练.为了方便出国交流,根乒乓球相关的人员都需要学习英语.具体分析如下: (1)共同的属性 ...

  8. 【JPA】使用JPA实现分页和模糊查询

    1.首先创建DAO层接口,实现JpaRepository和JpaSpecificationExecutor两个接口 JpaRepository<Admin, Integer> 泛型参数分别 ...

  9. awk流程控制

    awk 中if和for while 一.awk嵌套if判断语句 格式如下: if(表达式) {语句1} else if(表达式) {语句2} else {语句3} 如果if后边的语句块是的单个语句,{ ...

  10. hive 之 将excel数据导入hive中 : excel 转 txt

    一.需求: 1.客户每月上传固定格式的excel文件到指定目录.每月上传的文件名只有结尾月份不同,如: 10月文件名:  zhongdiangedan202010.xlsx  , 11月文件名: zh ...