1、组件可复用

2、slot元素作为组件模板之中的内容分发插槽，元素自身可以被替换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <p>{{msg}}</p>

        <!-- 组件的复用性 -->

        <my-div>登录</my-div>

        <hr />

        <my-div>注册</my-div>

    </div>

    <script src="./js/vue.js"></script>

    <script>

        // 全局组件

        Vue.component('my-div', {

            data(){

                return {

                    id: 1,

                }

            },

            // slot元素作为组件模板之中的内容分发插槽，元素自身可以被替换

            template:`

                <div>

                    <button><slot></slot></button>

                </div>

            `,

        })

        new Vue({

            el: "#app",

            data(){

                return {

                    msg: "测试",

                }

            },

        })

    </script>

</body>

</html>

Vue 组件复用性和slot的更多相关文章

  1. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

  2. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  3. vue 组件复用不刷新

    情景: 两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是 ...

  4. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  5. vue组件详解（四）——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  6. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

  7. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

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

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

  9. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

随机推荐

  1. java用普通类如何实现枚举功能

    用普通类如何实现枚举功能,定义一个Weekday的类来模拟枚举功能.     1.私有的构造方法.     2.每个元素分别用一个公有的静态成员变量表示.      可以有若干公有方法或抽象方法.采用 ...

  2. linux平台依赖性

    每个电脑平台有其自己的特点, 内核设计者可以自由使用所有的特性来获得更好的性能. in the target object file ??? 不象应用程序开发者, 他们必须和预编译的库一起连接他们的代 ...

  3. H3C Hosts文件

  4. 2019-8-31-C#-如何写-DEBUG-输出

    title author date CreateTime categories C# 如何写 DEBUG 输出 lindexi 2019-08-31 16:55:58 +0800 2018-2-13 ...

  5. unmask

            当我们登录系统之后创建一个文件总是有一个默认权限的,那么这个权限是怎么来的呢?这就是umask干的事情.umask 设置了用户创建文件的默认权限,它与chmod的效果刚好相反,umas ...

  6. 使用svndumpfilter exclude来清理svn库的废弃文件实现差别备份

      先啰嗦下为什么要使用svndumpfilter… svn库用久了以后就会越来越大,进行整体文件打包备份的时候,发现压力山大…尤其是美术团队也在使用svn进行重要美术资源管理的时候…….几百g的资源 ...

  7. windows下mysql免安装版配置（踩过的坑）简记

    下载 从官网(https://dev.mysql.com/downloads/mysql/)下载 这里的免安装版本的,相对来说干净,但是需要自己来配置很多东西. 配置 首先是注册windows的服务. ...

  8. 【题解】HDU5845 Best Division (trie树)

    [题解]HDU5845 Best Division (trie树) 题意:给定你一个序列(三个参数来根),然后请你划分子段.在每段子段长度小于等于\(L\)且子段的异或和\(\le x\)的情况下最大 ...

  9. $CF908D\ New\ Year\ and\ Arbitrary\ Arrangement$ 期望$dp$

    正解:期望$dp$ 解题报告: 传送门$QwQ$ 阿关于题目里那个形如$ab$的子序列我说下,,,我我我之前$get$了好久$QAQ$.这里子序列的个数的定义是这样儿的,举个$eg$,$aabb$,就 ...

  10. 20行Python代码爬取王者荣耀全英雄皮肤

    引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 ...