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. yum安装错误：CRITICAL:yum.cli:Config Error: Error accessing file for config file:///home/linux/+

    上网搜了一下然后自己总结一份 : 出现原因:yum可能没有,或者损坏 解决: 第一步:下载   wget  http://yum.baseurl.org/download/3.2/yum-3.2.28 ...

  2. javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下bor ...

  3. eslint在webstorm中有错误警告

    1. 报错Missing space before function parentheses的问题 解决:在代码目录中,打开.eslint文件,并在rules中添加如下一行代码即可: "sp ...

  4. Eclipse GlassFish Server 配置

    一.下载GlassFish Server    通过如下地址下载合适版本:    http://glassfish.java.net/public/downloadsindex.html    htt ...

  5. Dubbo-本地测试直连

    一.服务提供方 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http: ...

  6. Linux： 在某个路径及其子目录下查找所有包含“hello abcserver”字符串的文件。

    find /etc -name “*” | xargs grep “hello abcserver” 在 / 及其子目录下查找所有包含UNEXPECTED_SCHEMA find /  -name * ...

  7. Google 开源的 Python 命令行库：深入 fire（一）

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  8. .Net快速上手Nlog日志组件

    目录 一.NLog 简介 二.NLog 安装 三. NLog 配置 四.程序代码中写日志 五.参考 一.NLog 简介 NLog是适用于各种.NET平台的灵活,免费的日志记录平台.NLog使写入多个目 ...

  9. DEVOPS技术实践_21:Pipeline的嵌套以及流程控制的if和case语句

    1 if控制语句 使用一个简单的If控制语句 pipeline { agent any stages { stage('flow control') { steps { script { == ) { ...

  10. HBase学习笔记（一）——基础入门

    1.what:什么是HBase HBase的原型是Google的BigTable论文,受到了该论文思想的启发,目前作为Hadoop的子项目来开发维护,用于支持结构化的数据存储. HBase是一个高可靠 ...