<!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. 数据改变认知——不知怎么选，用RFM模型看舔狗质量！

    假设我长得很漂亮,拥有众多追求者,但是初出闺房的我对这世界上的男人毫无认知,那么该如何选择呢?这真是一个问题! 妈妈说,愿意为我花钱的男人未必爱我,但不愿意为我花钱的男人必定不爱我,而后传授了一套RF ...

  2. 平衡二叉树（c++）实现（存在问题：插入节点后，问题：调整树的结构存在问题）

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 更新那时间: 22:13  03-02-2020  逻辑存在问题:插入节点后,调整数的结构不 ...

  3. 【九度OJ】题目1017：还是畅通工程 解题报告

    [九度OJ]题目1017:还是畅通工程 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1017 题目描述: 某省调查乡村交通 ...

  4. 第十一个知识点：DLP,CDH和DDH问题都是什么？

    第十一个知识点:DLP,CDH和DDH问题都是什么 这是第11篇也是数学背景的第二篇.主要关注群操作如何被用于设计密码基础. 就像你现在知道的那样,密码学经常依赖于'难问题'.这也就是说,如果我们假设 ...

  5. 洛谷——P1980 [NOIP2013 普及组] 计数问题

    题目描述 试计算在区间 11 到 nn的所有整数中,数字x(0 ≤ x ≤ 9)x(0≤x≤9)共出现了多少次?例如,在 11到1111中,即在 1,2,3,4,5,6,7,8,9,10,111,2, ...

  6. Chapter 8 Selection Bias

    目录 8.1 The structure of selection bias 8.2 Examples of selection bias 8.3 Selection bias and confoun ...

  7. emqx的一个配置参数

    这个参数尝试改为internal后,所有用户都可以匿名登录

  8. SpringCloud集成Security安全(Config配置中心)

    1.说明 为了保护配置中心的敏感数据, 需要对Config Server进行安全保护, 本文基于Spring Security方案, 为Config Server增加最简单的Basic安全认证. 2. ...

  9. Selenium_截图（16）

    selenium截图有两种方式 截取全屏 get_screenshot_as_file(filename):将截图转化成文件保存到本地,filename为保存的文件路径 get_screenshot_ ...

  10. linux centos7 修改文件启动报错如何拯救

    系统无法启动 CentOS启动的时候读条已经读满,但是没有反应,按下f5键跳出启动列表,最后一条信息:A start job is running for /etc/rc.d/rc.local Com ...