(四) 组件化高级

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. springboot中的parent依赖作用详解

    最近在阅读springboot+vue全栈开发实战,松哥编写的,虽然比较简单,各种技术没有深入讲解,但是还是可以看看的,特别是我这个前端菜鸟哈哈,以后可是要学习全栈的,把书中看到的不会的地方会记录下笔 ...

  2. 【算法】数据结构与算法基础总览（中）——刷Leetcode等算法题时一些很实用的jdk辅助方法锦集

    最近重新学习数据结构与算法以及刷leetcode算法题时,发现不少jdk自带的方法可以提升刷题的效率.这些小技巧不仅仅对刷算法题带来便利,对我们平时开发也是很有帮助的.本文以java语言为基础,记录了 ...

  3. c++ stl nth_element 原理解析

    nth_element是stl中的一个库函数,它会使迭代器nth所指的元素与整个[first,last)完整排序后.同一个位置的元素同值.即找到完整排序时第n位的正确值. 但这个函数与完整排序的区别在 ...

  4. Luogu T10025 排列名次

    题目链接 题目描述 给定一个长度为n的排列,要求输出该排列的字典序名次(1,2,3,...,n的名次为1). 输入输出格式 输入格式: 第一行一个数n,表示排列长度. 第二行n个数,用空格分隔,表示一 ...

  5. Codeforces Round #345 (Div. 1) C. Table Compression (并查集)

    Little Petya is now fond of data compression algorithms. He has already studied gz, bz, zip algorith ...

  6. hdu 6794 Tokitsukaze and Multiple 前缀和思想+思维

    题意: t组输入,给你一个长度为n的数组,你每次可以从数组中找到a[i]和a[i+1],然后用a[i]+a[i+1]这个新元素来覆盖掉a[i]和a[i+1]的位置(1<=i<n),从而数组 ...

  7. Codeforces Round #547 (Div. 3) E. Superhero Battle (数学)

    题意:有一个HP为\(h\)的大怪兽,你需要轮流进行\(i\)次操作.每次可以使\(h+=d_i\)(\(d_i\)有正有负),当第\(n\)次操作完成后,再从第一次开始,问能否使得怪兽的HP变为\( ...

  8. Educational Codeforces Round 94 (Rated for Div. 2) B. RPG Protagonist (数学)

    题意:你和你的随从去偷剑和战斧,你可以最多可以拿\(p\)重的东西,随从可以拿\(f\)重的东西,总共有\(cnt_{s}\)把剑,\(cnt_{w}\)把战斧,每把剑重\(s\),战斧重\(w\), ...

  9. 记一次Python调试问题

    C#调用python脚本错误: 使用cmd直接运行脚本报错: TabError: inconsistent use of tabs and spaces in indentation 查看日志报错: ...

  10. PowerShell随笔2---初始命令

    PowerShell便捷之处 PowerShell中兼容运行cmd的命令,比如 ipconfig.ping命令等 PowerShell的命令更友好,可读性更强.比如停止一个服务 CMD命令:sc st ...