<!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. Spring Cloud 和dubbo

    一.SpringCloud微服务技术简介 Spring Cloud 作为Java 语言的微服务框架,它依赖于Spring Boot,有快速开发.持续交付和容易部署等特点.Spring Cloud 的组 ...

  2. 如何使用table布局静态网页

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. XML解析器

    1.非验证解析器 检查文档格式是否良好,如用浏览器打开XML文档时,浏览器会进行检查,即格式是否符合XML(可拓展标记语言)基本概念. 2.验证解析器 使用DTD(Document Type Defi ...

  4. Jmeter——脱离Jenkins后，Ant集成邮件通知

    之前搭建在本地的Jenkins环境,由于重装系统的原因,环境不能用了.在用jmeter做测试的时候,索性用本地ant构建,运行下来也一样平稳. 结合Jenkins搭建环境,可以参考博文:Jenkins ...

  5. Linux下编译生成SO并进行调用执行

    Linux下编译生成SO并进行调用执行 参考博客的博客: C编译: 动态连接库 (.so文件) - Vamei - 博客园 (cnblogs.com) C 多个动态库存在同名函数问题处理方法:-fvi ...

  6. ffmpeg 系列博客

    https://www.ffmpeg.org/download.html#build-macffmpeg 系列博文https://me.csdn.net/blog/leixiaohua1020http ...

  7. idea tomcat 热部署

    一有改动就在页面显示改动的东西就称为idea tomcat 热部署,开发的时候热部署一定要是demo:war exploded状态,若是在demo:war状态,怎么配置都不可能热部署,然后还要做如下的 ...

  8. 前端实现list排序

    需求 针对list中某个字段,实现list的升序和降序 效果图 代码 我是用在angular1.X中项目的,根据list中的sort字段进行排序. # sort.html <style> ...

  9. JAVA判断是否是Ajax请求

    /** * 是否是Ajax异步请求 * * @param request */ public static boolean isAjaxRequest(HttpServletRequest reque ...

  10. c++使用map保存成员函数地址

    note 本基于c++11介绍一种使用map保存成员函数地址 可避免使用 if 和 switch 配置灵活 方便, 代码维护效率高 结果: 范例开始 头文件包含 #include <iostre ...