<!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. Type of 'this' pointer in C++

    In C++, this pointer is passed as a hidden argument to all non-static member function calls. The typ ...

  2. VUE页面实现加载外部HTML方法

    前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍VU ...

  3. 【Java 基础】Arrays.asList、ArrayList的subList注意事项

    1. 使用Arrays.asList的注意事项 1.1 可能会踩的坑 先来看下Arrays.asList的使用: List<Integer> statusList = Arrays.asL ...

  4. B树和B+树原理图文解析

    B树与B+树不同的地方在于插入是从底向上进行(当然查找与二叉树相同,都是从上往下) 二者都通常用于数据库和操作系统的文件系统中,非关系型数据库索引如mongoDB用的B树,大部分关系型数据库索引使用的 ...

  5. $(document).ready()与window.onload的区别，站在三个维度回答问题

    1.执行时机 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...

  6. 【Redis的那些事 · 上篇】Redis的介绍、五种数据结构演示和分布式锁

    Redis是什么 Redis,全称是Remote Dictionary Service,翻译过来就是,远程字典服务. redis属于nosql非关系型数据库.Nosql常见的数据关系,基本上是以key ...

  7. Excel的内置功能，其实真的是够用了。（学习观）

    很多人问我,学好Excel是不是要背好多函数,是不是要会写VBA代码? 我说,那得看你能放多少时间和精力在Excel上. Excel的内置功能,其实真的是够用了:觉得不够用的,花几十块钱买个插件,也差 ...

  8. LuoguP7593 凑数 题解

    Content 给定 \(n\) 个整数 \(1,2,\dots,n\),请问是否能从这 \(n\) 个数中恰好选 \(k\) 个数,使得这 \(k\) 个数的和为 \(s\). 数据范围:\(t\) ...

  9. CF157A Game Outcome 题解

    Content 有一个 \(n\times n\) 的矩阵,每个元素都有一个权值.求所有满足其所在纵列所有元素权值和大于其所在横列所有元素权值和的元素个数. 数据范围:\(1\leqslant n\l ...

  10. JAVA从URL参数链接中获取指定参数的值

    import java.util.HashMap; import java.util.Map; /** * @author yvioo */ public class UrlUtils { /** * ...