(四) 组件化高级

1.插槽(slot)的基本使用

A:基本使用: <slot></slot>

B:默认置:<slot><h1>中间可以放默认值</h1></slot>

C:如果有多个值,同时放入到组件进行替换时,一起作为替换元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--父组件模版-->

<div id="app">

    <zzj1><button>按钮</button></zzj1> <!--组件1加个按钮-->

    <zzj1>长安镖局</zzj1> <!--组件2加个长安镖局-->

    <zzj1><h1>预留插槽后中间可以随便放</h1></zzj1> <!--组件3加个h1标签-->

    <zzj1></zzj1> <!--组件4显示默认值-->

</div>

<!--子组件模版 -->

<template id="zzjmb">

    <div>

        <h2>{{title}}</h2>

        <!--预留插槽,以便扩展组件,组件中抽取共性,把不同的预留在插槽-->

        <!--<slot></slot>-->

        <slot><h1>中间可以放默认值</h1></slot>

    </div>

</template>

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

<script>

    // root根组件(父组件)

    const app = new Vue({

        el: '#app',

        // 创建注册子组件

        components: {

            zzj1: {

                template: '#zzjmb',

                data() {

                    return {

                        title: '子组件data中的数据'

                    }

                },

            }

        }

    })

</script>

</body>

</html>

插槽(slot)的基本使用

插槽(slot)的基本使用

 2.具名插槽(slot)的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--父组件模版-->

<div id="app">

    <zzj1><button>按钮</button></zzj1> <!--替换默认插槽-->

    <zzj1><button slot="left">替换左边</button></zzj1> <!--替换左边插槽-->

</div>

<!--子组件模版 -->

<template id="zzjmb">

    <div>

        <h2>{{title}}</h2>

        <!--具名插槽-->

        <slot name="left"><span>左边</span></slot>

        <slot name="center"><span >中间</span></slot>

        <slot name="right"><span>右边</span></slot>

        <slot ><span>默认</span></slot>

    </div>

</template>

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

<script>

    // root根组件(父组件)

    const app = new Vue({

        el: '#app',

        // 创建注册子组件

        components: {

            zzj1: {

                template: '#zzjmb',

                data() {

                    return {

                        title: '子组件data中的数据-具名插槽'

                    }

                },

            }

        }

    })

</script>

</body>

</html>

具名插槽(slot)的使用

具名插槽(slot)的使用

3.变量编译的作用域

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--父组件模版-->

<div id="app">

<!--执行isshow会在当前模版中查找-->

    <zzj1 v-show="isshow"></zzj1>

</div>

<!--子组件模版 -->

<template id="zzjmb">

    <div>

        <h2>{{title}}</h2>

    </div>

</template>

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

<script>

    // root根组件(父组件)

    const app = new Vue({

        el: '#app',

        data: {

            title:'我是父组件',

            isshow:true

        },

        // 创建注册子组件

        components: {

            zzj1: {

                template: '#zzjmb',

                data() {

                    return {

                        title: '子组件data中的数据-编译的作用域',

                        isshow: false,

                    }

                },

            }

        }

    })

</script>

</body>

</html>

变量编译的作用域

变量编译的作用域

4.作用域插槽 (父组件替换插槽的标签,但是内容由子组件来提供)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body><!--作用域插槽==>父组件替换插槽的标签,但是内容由子组件来提供-->

<!--父组件模版-->

<div id="app">

    <zzj1><span slot="left" >子组件中展示的格式:</span></zzj1> <!--替换左边具名插槽-->

    <zzj1>

        <!--使用插槽的数据外面可以是template标签,也可以是其它标签-->

        <span slot="left">父组件中展示的格式后面有"-":</span>

        <template slot-scope="fyuyan1">  <!--用slot-scope接收子组件传的数据,后面变量名自定义-->

            <span v-for="i in fyuyan1.data">{{i}} - </span><!--用变量名.data来使用数据-->

        </template>

    </zzj1>

    <zzj1>

        <span slot="left">父组件中展示的格式去掉后面的"-":</span>

        <div slot-scope="fyuyan2">

            <span>{{fyuyan2.data.join('-')}}</span><!--用join函数来展示-->

        </div>

    </zzj1>

</div>

<!--子组件模版 -->

<template id="zzjmb">

    <div>

        <ul>

            <slot name="left"><span>左边</span></slot>

            <slot :data="yuyan"><li v-for="i in yuyan">{{i}}</li></slot><!--自定义绑定名data,来绑定发射子组件的数据-->

        </ul>

    </div>

</template>

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

<script>

    const app = new Vue({

        el: '#app',

        data: {},

        components: {

            zzj1: {

                template: '#zzjmb',

                data() {

                    return {

                        yuyan:['python','go','vue'],

                        title: '子组件data中的数据-编译的作用域',

                    }

                },

            }

        }

    })

</script>

</body>

</html>

作用域插槽

Vue学习笔记-Vue.js-2.X 学习(四)

Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  2. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  3. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  4. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  5. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  6. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  7. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  8. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

  9. 20145213《Java程序设计学习笔记》第六周学习总结

    20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

随机推荐

  1. 面试官：请讲一下Redis主从复制的功能及实现原理

    摘要:Redis在主从模式下会有许多问题需要考虑,这里写了一些关于redis在多服务器下的一些问题分析和总结. Redis单节点存在单点故障问题,为了解决单点问题,一般都需要对redis配置从节点,然 ...

  2. python内置常量是什么？

    摘要:学习Python的过程中,我们会从变量常量开始学习,那么python内置的常量你知道吗? 一个新产品,想熟悉它,最好的办法就是查看说明书! 没错,Python也给我们准备了这样的说明书--Pyt ...

  3. 【uva 11491】Erasing and Winning（算法效率--贪心+单调队列）

    题意:有一个N位整数,要求输出删除其中D个数字之后的最大整数. 解法:贪心.(P.S.要小心,我WA了2次...)由于规定了整数的位数,那么我们要尽量让高位的数字大一些,也就是要尽量删去前面小的数字. ...

  4. Codeforces Round #650 (Div. 3) F1. Flying Sort (Easy Version) (离散化,贪心)

    题意:有一组数,每次操作可以将某个数移到头部或者尾部,问最少操作多少次使得这组数非递减. 题解:先离散化将每个数映射为排序后所对应的位置,然后贪心,求最长连续子序列的长度,那么最少的操作次数一定为\( ...

  5. WSL1中安装Docker

    # step 0: clear# sudo apt-get remove docker docker-engine docker-ce docker.io# step 1: 安装必要的一些系统工具su ...

  6. 01、mysql安装配置

    1.下载mysql软件安装包 MySQL版本:5.7.17 mysql下载地址:http://rj.baidu.com/soft/detail/12585.html?ald 2.配置mysql数据库与 ...

  7. CGI & FastCGI 协议

    目录 CGI 是什么 CGI 特点 CGI 的流程 FastCGI 是什么 CGI & FastCGI(转载) 推荐Blog: CGI是什么,FastCGI是什么 CGI 是什么 公共网关接口 ...

  8. linux repo init 遇到的问题

    问题描述: 利用repo从远程服务器上取代码时候,出现错误  fatal: cannot make .repo directory:Permission denied, 加了sudo 之后,还是不行, ...

  9. 831A- Unimodal Array

    A. Unimodal Array time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  10. μC/OS-III---I笔记12---任务管理

    任务管理任务切换应该算是UCOS最基本的部分,首先保存当前任务寄存器的内容到当前任务的堆栈:接着弹出即将进行的任务的堆栈内容到寄存器中然后就是按寄存器内容执行,这个过程成为上下文切换.任务堆栈在创建任 ...