<!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. 【Service】【MiddleWare】【Message】rabbitMQ

    1. 概念: 1.1. 消息型中间件:遵循AMQP协议(高级消息队列协议)AMQP 0-9-1 AMQP 1.0 1.2. 路由模型: direct topic fan-out headers 1.3 ...

  2. springboot-devtools实现项目的自动重启

    热部署的引入依赖: <!-- 热部署 --> <dependency> <groupId>org.springframework.boot</groupId& ...

  3. Mysql 分页查询sql优化

    先查下数据表的总条数: SELECT COUNT(id) FROM ts_translation_send_address 执行分页界SQL 查看使用时间2.210s SELECT * FROM ts ...

  4. [BUUCTF]REVERSE——简单注册器

    简单注册器 附件 步骤: apk文件,直接用apkide打开 去找反编译后的文件,反编译后的语言并没有看大懂,网上百度后找到了一个反编的神器jeb,下载地址 用它反编译后按tab,就能看懂代码了,搜索 ...

  5. Oracle 函数高级查询

    目录 oracle高级查询 Oracle SQL获取每个分组中日期最新的一条数据 求平均值(为0的参数不均摊) 字符串清除前面的0 判断字符串串是否包含某个字符串 switch 判断 oracle不足 ...

  6. 贪心——55. 跳跃游戏 && 45.跳跃游戏II

    给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: true ...

  7. 基于DNN的残余回声抑制

    摘要 由于功率放大器或扬声器的限制,即使在回声路径完全线性的情况下,麦克风捕获的回声信号与远端信号也不是线性关系.线性回声消除器无法成功地消除回声的非线性分量.RES是在AES后对剩余回声进行抑制的一 ...

  8. DevOps实战（Docker+Jenkins+Git）

    基于Docker+Jenkins+Git的CI/CD实战 与上一篇随笔:基于 Jenkins+Docker+Git 的CI流程初探 有所不同,该内容更偏向于实际业务的基础需求. 有几点需要注意: 该实 ...

  9. 【LeetCode】999. Available Captures for Rook 解题报告（C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力遍历 日期 题目地址:https://leetc ...

  10. Mobile phones(poj1195)

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 18453   Accepted: 8542 De ...