Vue学习笔记-作用域插槽
有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数。
<div id="app">
<cpn></cpn>
<cpn>
<!--目的是获取子组件的数据并且按照父组件想要的形式展示-->
<!--为了拿到slot传过来的data,必须用template-->
<template slot-scope="slot">
<!--<span v-for="item in slot.data">{{item}}-</span>-->
<span>{{slot.data.join(' - ')}}-</span>
</template>
</cpn> </div> <template id="cpn">
<div style="display: flex;flex-direction: row">
<slot :data="planguage">
<ul>
<li v-for="item in planguage">{{item}}</li>
</ul>
</slot> </div> </template> </body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cpn = {
template: '#cpn',
data () {
return {
planguage: ['1111', '2222', '3333',' 4444']
}
}
}
const app = new Vue({
el: '#app',
components: {
cpn
}
})
</script>
在父组件使用我们的子组件时,从子组件中拿到数据:
我们通过<template slot-scope="slot">获取到slot属性
在通过slot.data就可以获取到刚才我们传入的data了
Vue学习笔记-作用域插槽的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- Flutter端代码
新建一个页面FirstScreen.dartmain.dart改动代码 导入import 'dart:ui' as ui;import 'package:flutter_module/FirstScr ...
- windows mysql官方绿色版zip包安装教程
环境: 系统环境 Windows 10 64位 mysql版本 5.7.19 一.万变不离的下载 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Down ...
- 【SD系列】SAP SD模块-销售收入科目的配置
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-销售收入科目的配置 ...
- poj2431Expedition
A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Being rather poo ...
- CSS中设置字体样式
<style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...
- 关于Nuget包安装之后再卸载,找不到dll的问题
场景: 在nuget上安装了FFTW.NET,自动的安装一堆其依赖的dll,那些dll都是donet自带的.再卸载这些dll的时候,项目可以生成成功,就是跑不起来.提示如下: 解决方案: 经过排查发现 ...
- 06:(h5*)Vue第六天
目录 1:iView 2: element 3: vuex 正文 1:i-view 1:装包 npm install view-design --save 2:导包 import ViewUI f ...
- 《JAVA设计模式》之组合模式(Composite)
在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述 ...
- H Kuangyeye and hamburgers
链接:https://ac.nowcoder.com/acm/contest/338/H来源:牛客网 题目描述 Kuangyeye is a dalao of the ACM school team ...
- SqlServer 查看表注释
SELECT DISTINCT d.name, f.value FROM syscolumns a LEFT JOIN systypes b ON a.xusertype= b.xusertype I ...