关于slot、slot-scope的指令的一些操作记录

关于slot、slot-scope的指令的一些操作记录

从vue2.6.0开始,slot、slot-scope已经被废弃,推荐使用v-slot;

slot-scope是作用域插槽,
父组件中不能直接用子组件中定义的data数据。
而slot-scope的出现就是解决了这样的问题

子组件:
<slot name="myslot" :data='list'></slot>父组件:
<son><template slot="myslot" slot-scope="scope"><ul><li v-for="item in scope.data">{{item}}</li></ul></template>
</son>备注:**slot-scope就是取data的值,slot-scope的值是自定义的,我们可以取任何名称,但是data的值传过来时是以对象形式传输的,所以在这scope.data才是list的值**。
------------------------------------------------------------------------------vue2.6.0开始,slot、slot-scope已经被废弃,推荐使用v-slot;
子组件:<div><slot name="header":msg="msg"></slot><p>这里是test组件</p>
</div>父组件:
<Test><template v-slot:header="scope">//v-slot定义作用域插槽<div><h3>slot</h3><p> {{scope.msg}} </p></div></template>
</Test>

特别注意使用事项----》》》在这里插入图片描述

v-slot在使用时,需要在template标签内,这点大家在应用时要注意。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于前端Vue的webpack的基本只用总结心得

1.先说一下vue webpack 的配置的问题 "scripts": {"dev": "node build/dev-server.js","build": "node build/build.js","lint": "eslint --ext .js,.vue src" }我们 npm run dev 便是运行的 第一条命…

五种方法提高你的智力

五种方法提高你的智力 智力是天生的&#xff0c;一成不变的吗&#xff1f;教你五种方法提高智力&#xff1a;1体验新鲜事物 2挑战自己3有创造力的思考4生活中&#xff0c;多玩“hard”模式5多与他人进行交流 弯兔123 2011-04-04 14:53经验说&#xff1a;智力是天生的&#xff0…

vue-cli中的webpack的config配置详细说明

vue-cli中的webpack的config配置详细说明打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件&#xff0c; “dev.env.js”&#xff0c;“index.js”&#xff0c;“prod.env.js”&#xff0c; 我们先打开prod.env.js的文件&#xff0c;看里面的内容&#xff1a;‘use…

matlab中 text 使用画图示例

% Plot the image of the Sensitivity and False Positive per image clear; close all; clc; I1 [0.5 75]; I2 [1 54.5];msize 19; %设定字体的大小hold on plot(I1(1),I1(2),ko-,MarkerFaceColor,r) % 红色实心圆点text(I1(1)0.1,I1(2),Wei 2002) hold on plot(I2(1),I2(2)…

计算机视觉界CV牛人牛事

CV人物1&#xff1a;Jianbo Shi史建波毕业于UC Berkeley&#xff0c;导师是Jitendra Malik。其最有影响力的研究成果&#xff1a;图像分割。其于2000年在PAMI上多人合作发表”Noramlized cuts and image segmentation”。这是图像分割领域内最经典的算法。主页&#xff1a;www.…

vscode编辑器,自己喜欢的颜色

"workbench.colorCustomizations": { //覆盖当前所选颜色主题的颜色"editor.background": "#1b1b19", //编辑器背景色"editor.selectionBackground": "#3514c554", //用户选中代码段的颜色 "editor.findMatchBackgroun…

Ubuntu中python切换及pip 安装相应python库

更改python默认版本 只需在终端里面执行 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 150 sudo update-alternatives --install /usr/bin/python python …

js消息任务队列

JS单线程、异步、同步概念 多次出现“事件循环”这个名词&#xff0c;简单说明了事件循环的步骤&#xff0c;以便理解nextTick的运行时机&#xff0c;这篇文章将更为详细的分析下事件循环。在此之前需要了解JS单线程&#xff0c;及由此产生的同步执行环境和异步执行环境。 众所…

Ubuntu下安装cmake,配置ITK 和 SimpleITK, VTK(已测试可执行)

curses库 在安装cmake之前应该先安装一下curses库。如果系统中有curses库的话&#xff0c;cmake将生成一个可执行文件ccmake&#xff0c;它是一个基于文本程序的终端&#xff0c;有点类似windows GUI。 sudo apt-get install libncurses5-dev 备注&#xff1a;若无curses库…

定义[nextTick、事件循环]

详情清查收&#xff1a;---》 实例理解nextTick的使用&#xff0c;并给出在页面渲染上的优化巧用 https://www.cnblogs.com/hity-tt/p/6729118.html

世界坐标与图像坐标

1. 右手坐标系 2. 左手坐标系 伸出左手&#xff0c;让拇指和食指成“L”形&#xff0c;大拇指向右&#xff0c;食指向上。其余的手指指向前方。这样就建立了一个左手坐标系。拇指、食指和其余手指分别代表x&#xff0c;y&#xff0c;z轴的正方向。判断方法&#xff1a;在空间直…

module.exports与exports,export与export default之间的关系和区别

CommonJS模块规范和ES6模块规范完全是两种不同的概念。 CommonJS模块规范: 根据这个规范&#xff0c;每个文件就是一个模块&#xff0c;有自己的作用域。在一个文件里面定义的变量、函数、类&#xff0c;都是私有的&#xff0c;对其他文件不可见。 CommonJS规范规定&#xff0…

Ubuntu下安装 imagej 和 Fiji

安装ImageJ 方法一 sudo apt-get install imagej whereis imagej imagej -version 方法二 下载 Linux版本的 imagej 安装 Instructions cd /home mkdir imagej cp ij150-linux64-java8.zip /home/imagej unzip ij150-linux64-java8.zip 建立软连接&#xff0c;可以在终端…

vue的diff 算法

1. 当数据发生变化时&#xff0c;vue是怎么更新节点的&#xff1f; 要知道渲染真实DOM的开销是很大的&#xff0c;比如有时候我们修改了某个数据&#xff0c;如果直接渲染到真实dom上会引起整个dom树的重绘和重排&#xff0c;有没有可能我们只更新我们修改的那一小块dom而不要…

Ubuntu中python调用SimpleITK来显示图像

misc.imshow ipython import os from scipy import misc dataDir os.environ["HOME"] "/Downloads/SimpleITK-MICCAI-2001-Tutorial-master/Data" print dataDir image misc.imread(dataDir "FA.png") misc.imshow(image) 或者 ipython i…

Websocket--- long loop--ajax轮询

Websocket--- long loop--ajax轮询,long poll 和 ajax轮询 的原理。 1&#xff0c;首先是 ajax轮询 &#xff0c;ajax轮询 的原理非常简单&#xff0c;让浏览器隔个几秒就发送一次请求&#xff0c;询问服务器是否有新信息。 2&#xff0c;long poll 其实原理跟 ajax轮询 差不多…

Linux下设置环境变量

单独查看PATH环境变量&#xff0c;可用&#xff1a; echo $PATH11 方法一&#xff1a;在用户主目录下的 profile或 bashrc文件 sudo gedit ~/.profile 或者 sudo gedit ~/.bashrc123123 可以在此文件末尾加入PATH的设置如下&#xff1a; export PATH”$PATH:your path1:you…

前端解决一像素问题

一、transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框&#xff0c;然后通过 media 适配不同的设备像素比&#xff0c;然后调整缩放比例&#xff0c;从而实现一像素边框 首先用伪类创建边框 .border-bottom{position: relative;border-top: none !important; }.…

Python缩进问题

Python缩进问题 Python中&#xff0c;是通过代码的缩进&#xff0c;来决定代码的逻辑的。通俗的说&#xff0c;Python中的代码的缩进&#xff0c;不是为了好看&#xff0c;而是觉得代码的含义&#xff0c;上下行代码之间的关系。缩进弄错了&#xff0c;就会导致程序出错&#…

Ubuntu下安装Pycharm及相关设置

下载 Pycharm 社区版本 http://www.jetbrains.com/pycharm/download/#sectionlinux 安装指导 Copy the pycharm-community-2016.2.3.tar.gz to the desired installation location (make sure you have rw permissions for that directory) cp /home/bids/Downloads/pycha…