<!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. mysql必知必会--使用MySQL

    连接 在具有可供使用的MySQL DBMS和客户机软件之后,有必要简要讨 论一下如何连接到数据库. MySQL与所有客户机 - 服务器DBMS一样,要求在能执行命令之前登 录到DBMS.登录名可以与网 ...

  2. 10maven依赖继承、统一版本/编码

    A >  B  >  C A依赖于B,B依赖于C,如果A想间接依赖C,那么B和C之间的依赖范围必须是compile,不然A依赖不了C 但是有点麻烦,因为每次A想依赖于C都要确认B和C之间的 ...

  3. redis缓存优化

    redis缓存优化 一.问题 在Javaweb项目中,如果每次刷新,所有资源都重新从数据库中读取,这样每次效率会很低,在这里可以使用redis非关系型数据库,将一些不经常变化得资源加载进内存中.提高效 ...

  4. spring的困惑--org.springframework.web.servlet.DispatcherServlet noHandlerFound

    出现这种情况可能是代码没有更新到Tomcat服务器上

  5. LeetCode 145. 二叉树的后序遍历 (用栈实现后序遍历二叉树的非递归算法)

    题目链接:https://leetcode-cn.com/problems/binary-tree-postorder-traversal/ 给定一个二叉树,返回它的 后序 遍历. 示例: 输入: [ ...

  6. linux 多并发 连接限制修改

    1. 修改 ulimit -a 查看 open files 表示单个用户能打开的最大句柄  如果开发的高并发当个进程打开的句柄需要很大. 修改/etc/security/limits.conf 里面有 ...

  7. 用记事本编辑HTML文件后保存代码全堆在一起了，记事本打开html文件格式乱了

    经常会遇到这么一个现象,记事本打开编辑html代码,保存后格式就乱了,代码全部堆在一行了.遇到这种情况有时候也很无语 因为平常工作中也经常遇到这样的情况,后来通过研究,大概找到问题的所在. 我是这么一 ...

  8. Ubuntu中FTP安装配置及基本概念(原创)

    注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/ftp-inst ...

  9. Python 变量&列表 初学者笔记

    变量 消除空白后该变量需要存储一下(此操作常用于“储存用户输入并对其进行清理”) strip()消除两端空白 lstrip()消除前部空白 rstrip()消除末尾空白   upper()全部字母大写 ...

  10. 【spring boot】SpringBoot初学（2.1） - properties读取明细

    前言 算是对<SpringBoot初学(2) - properties配置和读取>的总结吧. 概念性总结 一.Spring Boot允许外化(externalize)你的配置.可以使用pr ...