<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<body>

<div id="app">

    <cpn>

        <!-- 插槽-插入 -->

        <!-- 注意，由于编译作用域的概念，这里是在#app的作用域，所以这里showIt使用的是app实例对象的属性 -->

        <span slot="center" v-show="showIt">

            你好

        </span>

    </cpn>

</div>

<template id="cpn">

    <div>

        <span>左边</span>

        <!-- slot：插槽   name="center"给插槽具名 -->

        <slot name="center">

            <!-- 插槽默认值 -->

            <span>中间</span>

        </slot>

        <span>右边</span>

    </div>

</template>

<script>

    // 组件的插槽：

    //     组件的插槽也是为了让我们封装的组件更具扩展性

    //     让使用者可以决定组件内部的一些内容到底显示什么

    const app = new Vue({

        el: "#app",

        data: {

            message: '你好啊',

            showIt: 1

        },

        /*注册组件*/

        components:{

            cpn: {

                template: '#cpn',

            }

        },

    })

</script>

</body>

</html>

vue组件插槽与编译作用域的更多相关文章

  1. vue组件---插槽

    (1)插槽内容 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 在父级组件里可以 ...

  2. [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  3. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  4. vue组件插槽

    vue中子组件内容如何定义为可扩展的呢,就是用slot插槽来实现.如下图 如果<slot></slot>标签有内容,那就默认显示里面的内容,父组件传了就会覆盖此默认的内容.

  5. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  6. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

  7. Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...

  8. vue深入了解组件——插槽

    一.插槽内容 Vue实现了一套内容分发的API,这套API基于当前的Web Components规范草案,将 <slot>  元素作为承载分发的内容的出口. 它允许你像这样合成组件: &l ...

  9. Vue 组件化开发之插槽

    插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...

随机推荐

  1. hive中parquet存储格式数据类型timestamp的问题

    当存储格式为parquet 且 字段类型为 timestamp 且 数据用hive执行sql写入. 这样的字段在使用impala读取时会少8小时.建议存储为sequence格式或者将字段类型设置为st ...

  2. 陶陶摘苹果(升级版)P1478_巧妙模拟

    如此水的题居然让我绞尽脑汁,我在想我是不是快退役了. 这道题我看见很多解法:贪心,背包,桶排乱七八糟一大堆. 题目 题目描述 又是一年秋季时,陶陶家的苹果树结了 n 个果子.陶陶又跑去摘苹果,这次他有 ...

  3. 【redis】pipeline - 管道模型

    redis-pipeline 2020-02-10: 因为我把github相关的wiki删了,所以导致破图...待解决.(讲真github-wiki跟project是2个url,真的不好用) 因为用的 ...

  4. 数据库中间件DBLE学习(二) 学习配置schema.xml

    前言 一边有一个经常引诱我让我"娱乐至死"的视频,还有一个不停"鞭策"我让我快点学习的大BOSS.正是有这两种极端的爱才让我常常在自信中明白自己努力的方向.嗯, ...

  5. C语言简单编译预处理-笔记

    预处理指令 所谓预处理,是指,在编译之前对程序源码进行初步的转换,产生新的源代码提供给编译器.预处理时主要完成:包含其他源文件,定义宏,根据条件决定编译时是否包含某些代码(>防止重复包含某些文件 ...

  6. 吴裕雄--天生自然HADOOP操作实验学习笔记：hdfs分布式文件系统安装

    实验目的 复习安装jdk 学习免密码登录 掌握安装配置hdfs集群的方法 掌握hdfs集群的简单使用和检查其工作状态 实验原理 1.hdfs是什么 hadoop安装的第一部分是安装hdfs,hdfs是 ...

  7. 【笔记】机器学习 - 李宏毅 - 12 - CNN

    Convolutional Neural Network CNN 卷积神经网络 1. 为什么要用CNN? CNN一般都是用来做图像识别的,当然其他的神经网络也可以做,也就是输入一张图的像素数组(pix ...

  8. phpcms抛出的二维数组转移到js，js中for....in遍历数组，用“.”连接来读出一维数组值

    直切正题: 1.phpcms在模版中读出数组有很多中方法,如,{pc:content action="lists"}或{pc:get sql=""},经过{lo ...

  9. KindEditor配置和使用

    1下载kindeditor包,目前最新版本是kindeditor-3.5.5.下载地址:http://www.kindsoft.net/ 2.解压之后,解压目录kindeditor如下图所示. 3.开 ...

  10. Python 安装 virturalenv 虚拟环境

    返回目录 本篇索引 一.概述 二.Linux下安装Python虚拟环境 三.Windows下安装Python虚拟环境 一.概述 有时候会在一台主机上安装多个不同的Python版本,用以运行不同时期开发 ...