<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <link rel="stylesheet"  type="text/css" href="index.css"/>

        <script src="vue.js"></script>

    </head>

    <body>

        <div>

        <h1>--解构插槽 Prop--</h1>

        <div id="example6">

            <current-user v-slot="{ user }">

                {{ user.firstName }}

            </current-user>

            <!--将user重命名为person-->

            </br>

            <current-user v-slot="{ user : person }">

                {{ person.firstName }}

            </current-user>

        </div>

        <script>

        Vue.component('current-user', {

            data: function () {

                return {

                    user: {

                        firstName: 'Arya',

                        lastName: 'Stark'

                    }

                }

            },

            template: '\

                <span>\

                    <slot v-bind:user="user">{{ user.lastName }}</slot>\

                </span>\

            '

        })

        var example6 = new Vue({

            el:'#example6'

        })

        </script>

        </div>

    </body>

</html>

运行效果图：

解构插槽 Prop的更多相关文章

  1. 变量的解构赋值////////////z

    变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...

  2. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  3. JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值

    1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...

  4. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...

  5. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  6. ES6的变量解构赋值

      前  言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...

  7. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  8. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  9. const命令，全局变量的属性,变量的解构赋值

    const命令 1:声明常量(只在当前代码块中有效)---注意声明的常量可以是对象,但是常量储存的是对象的地址,地址声明后不可变,但是可以给常量对象添加属性 全局变量的属性 1:window和glob ...

随机推荐

  1. SpringBoot(3)：SpringData 数据访问

    一. 简介 Spring Data是一个用于简化数据库访问,并支持云服务的开源框架:其主要目标是 使得对数据的访问变得方便快捷.对于数据访问层,无论是 SQL(关系型数据库) 还是 NOSQL(非关系 ...

  2. SpringBoot 整合 spring security oauth2 jwt完整示例 附源码

    废话不说直接进入主题(假设您已对spring security.oauth2.jwt技术的了解,不懂的自行搜索了解) 依赖版本 springboot 2.1.5.RELEASE spring-secu ...

  3. 【Java基础】ArrayList初始化操作

    要用60个零初始化列表,请执行以下操作: List<Integer> list = new ArrayList<Integer>(Collections.nCopies(60, ...

  4. Selenium之Canvas画布操作

    现在有一个场景是需要进入到 Canvas画布中 进行单击操作,现在使用过如下方法 canvas = driver.find_element_by_xpath("//canvas[@id='# ...

  5. 『学了就忘』Linux启动引导与修复 — 74、Linux系统的修复模式（光盘修复模式）

    目录 1.光盘修复模式概念 2.光盘修复模式修复系统问题 (1)准备系统光盘 (2)进入BIOS (3)修改BIOS的启动顺序 (4)进入光盘修复模式 (5)修复系统 (6)修复系统实操 (7)总结 ...

  6. 车载以太网第二弹 | 测试之实锤-物理层PMA测试实践

    前言 本期先从物理层"PMA测试"开始,下图1为"PMA测试"的测试结果汇总图.其中,为了验证以太网通信对线缆的敏感度,特选取两组不同特性线缆进行测试对比,果然 ...

  7. Java后端高频知识点学习笔记1---Java基础

    Java后端高频知识点学习笔记1---Java基础 参考地址:牛_客_网 https://www.nowcoder.com/discuss/819297 1.重载和重写的区别 重载:同一类中多个同名方 ...

  8. C# 脚本

    有些情况下,需要在程序运行期间动态执行C#代码,比如,将某些经常改变的算法保存在配置文件中,在运行期间从配置文件中读取并执行运算.这时可以使用C#脚本来完成这些工作. 使用C#脚本需要引用库Micro ...

  9. Python软件目录结构

    目录组织方式 关于如何组织一个较好的Python工程目录结构,已经有一些得到了共识的目录结构.在Stackoverflow的这个问题上,能看到大家对Python目录结构的讨论. 这里面说的已经很好了, ...

  10. JS验证身份证是否符合规则

    调用isIdCardNo(num)  验证通过返回true 错误返回false function isIdCardNo(num) { var factorArr = new Array(7, 9, 1 ...