<!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. 最强最全面的大数据SQL经典面试题（由31位大佬共同协作完成）

    本套SQL题的答案是由许多小伙伴共同贡献的,1+1的力量是远远大于2的,有不少题目都采用了非常巧妙的解法,也有不少题目有多种解法.本套大数据SQL题不仅题目丰富多样,答案更是精彩绝伦! 注:以下参考答 ...

  2. mysql数据库总结笔记

    一.安装和配置数据库: 下载mysql地址:https://dev.mysql.com/downloads/mysql/ windows下载的版本是installer msi版本:https://de ...

  3. Json解析案例-teachers数据集

    背景: 通过平台执行接口时,接口往往返回的JSON串,所以平台要能提供方便快捷的JSON解析函数. 一.Json字符串: 1 { 2 "lemon": { 3 "teac ...

  4. Swagger请求报错：TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

    TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 如下图 ...

  5. JAVA获取当前日期指定天数之后的日期

    /** * 获取day天之后的日期 * @param day 天数 * @return */ public static String getDate(int day){ Calendar calen ...

  6. c++11之日期和时间库

    本文主要介绍 std::chrono日期和时间用法. 演示环境: vs2017 0.头文件 1 #include <chrono> 2 #include <thread>// ...

  7. 【python】PyQt5 QAction 添加点击事件

    def test(): #your function ui.yourQActionName.triggered.connect(lambda:test()) #添加lambda: 就不报错了

  8. ACE_Get_Opt函数笔记

    #include "ace/OS_NS_string.h" #include "ace/Configuration.h" #include "ace/ ...

  9. localstorage的浏览器支持情况

    localStorage的兼容性不错,就国内的情况,已经基本没有问题了.localStorage的原理很简单,浏览器为每个域名划出一块本地存储空间,用户网页可以通过localStorage命名空间进行 ...

  10. 制造运营管理 (MOM) 的工作流驱动方法

    介绍 "在企业中使用的任何技术的第一条规则是,应用于高效运营的自动化将放大效率.第二个是自动化应用于低效率的操作会放大低效率." - 比尔盖茨 . 工作流是结构化的活动,主要涉及人 ...