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. sci,ei,istp三大科技文献检索系统

    印刷版(SCI) 双月刊 ,500种 联机版(SciSearch) 周更新 ,600种 光盘版(带文摘)(SCICDE) 月更新 ,500种(同印刷版) 网络版(SCIExpanded) 周更新 ,6 ...

  2. <mvc:annotation-driven /><context:annotation-config/><context:component-scan/>

    <context:annotation-config/> 隐式地向 Spring容器注册AutowiredAnnotationBeanPostProcessor. RequiredAnno ...

  3. vue-learning：6-template-v-bind

    绑定元素特性的指令v-bind 回顾下,从HTML元素的结构看,在VUE框架中,内容由插值{{ }}和v-html绑定:v-if和v-show可以控制元素的可见性:v-for可以用于批量生成列表元素. ...

  4. C/C++ 获取键盘事件

    Windows 系统下的 vs 中可以使用 _kbhit() 函数来获取键盘事件,使用时需要加入 conio.h 头文件 #include <conio.h> #include <i ...

  5. C\C++串口通信编程的一点技术记录

    新工作接的第一个活,要写一个配合设备调试的上位机程序. 除了MFC界面的部分,就是要处理几条命令. 串口通信部分代码借鉴的是这一篇文章:http://blog.sina.com.cn/s/blog_a ...

  6. Xgboost参数调节

    转自:https://segmentfault.com/a/1190000014040317 整体: # 1.调试n_estimators cv_params = {'n_estimators': [ ...

  7. web应用中web.xml文件的解释

    一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></di ...

  8. OPEN GL

    https://blog.csdn.net/cdut100/article/details/45753227 https://www.jianshu.com/p/d22cf555de47 https: ...

  9. 对EntityViewInfo的理解

    1,EntityViewInfo常常用作bos中接口参数,来做查询用,其中包含了FilterInfo(过滤).Selector(指定属性)以及Sorter(排序)   SelectorItemColl ...

  10. 记一次linux磁盘清理 - 已经删除的文件占用了大量磁盘空间

    今天开发环境磁盘占满了,导致开发环境上的 nginx .redis 等组件总是报异常. 跳到系统根目录下 cd / 检查磁盘占用情况 df -h 哇,40G硬盘全用完了.看看是哪些文件占了那么多内存. ...