<!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. Vue.js 学习

    一,Vue.js 介绍 Vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还便于与第 ...

  2. HTTP协议及常见状态码

    超文本传输协议(HTTP)是用于传输诸如HTML的超媒体文档的应用层协议.它被设计用于Web浏览器和Web服务器之间的通信,但它也可以用于其他目的. HTTP遵循经典的客户端-服务端模型,客户端打开一 ...

  3. Redis | 第12章 Sentinel 哨兵模式《Redis设计与实现》

    目录 前言 1. 启动并初始化 Sentinel 2. Sentinel 与服务器间的默认通信 2.1 获取主服务器信息 2.2 获取从服务器信息 2.3 向主服务器和从服务器发送信息 3. 接受来自 ...

  4. Wireshark（四）：网络性能排查之TCP重传与重复ACK

    原文出处: EMC中文支持论坛 作为网络管理员,很多时间必然会耗费在修复慢速服务器和其他终端.但用户感到网络运行缓慢并不意味着就是网络问题. 解决网络性能问题,首先从TCP错误恢复功能(TCP重传与重 ...

  5. 【CF1591】【数组数组】【逆序对】#759（div2）D. Yet Another Sorting Problem

    题目:Problem - D - Codeforces 题解 此题是给数组排序的题,操作是选取任意三个数,然后交换他们,确保他们的位置会发生改变. 可以交换无限次,最终可以形成一个不下降序列就输出&q ...

  6. 如何优雅的在scrapy中使用selenium —— 在scrapy中实现浏览器池

    1 使用 scrapy 做采集实在是爽,但是遇到网站反爬措施做的比较好的就让人头大了.除了硬着头皮上以外,还可以使用爬虫利器 selenium,selenium 因其良好的模拟能力成为爬虫爱(cai) ...

  7. [BUUCTF]REVERSE——findit

    findit 步骤: apk文件,直接用apkide打开,找到findit文件 查看了所有的函数,没找到有关flag的线索,但是找到了一串奇怪的16进制 将第一串转换一下,感觉第二串应该是flag 拿 ...

  8. python简单爬虫的实现

    python强大之处在于各种功能完善的模块.合理的运用可以省略很多细节的纠缠,提高开发效率. 用python实现一个功能较为完整的爬虫,不过区区几十行代码,但想想如果用底层C实现该是何等的复杂,光一个 ...

  9. CF1440A Buy the String 题解

    Content 有 \(t\) 组询问,每组询问给出一个长度为 \(n\) 的 \(0/1\) 串,你可以花 \(h\) 的代价把 \(0\) 修改成 \(1\) 或者把 \(1\) 修改成 \(0\ ...

  10. Python软件目录结构

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