抽离的子组件
<template>
<div class="wrapper">
<slot name="demo" :msg="msg" text="this is a slot demo , ">this is demo slot.</slot>
</div>
</template> <script>
export default {
components: {},
props: {},
data() {
return {
msg: 'nmb'
}
},
watch: {},
computed: {},
methods: {},
created() {},
mounted() {}
}
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>

  

某组件内使用抽离组件
<father>
<template v-slot:demo="scope">
sb
<p>{{ scope.text }}{{ scope.msg }}</p>
</template>
</father>

  

v-slot vue2.6新增指令使用指南的更多相关文章

  1. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  2. Vue2.0原理-指令

    指令是 模板解析 的续章,本文会尝试从源码的角度来理解 指令 是如何被提取和应用的. 指令的提取 指令的提取过程是在parse阶段进行的,在 parseHTML 方法中,会解析字符串模板为如下的单个a ...

  3. vue2.0 自定义指令详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue2.0 v-model指令

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 17. Vue2.4+新增属性$listeners

    现在我们来讨论一种情况,A组件与C组件怎么通信,我们有多少种解决方案? 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能 ...

  6. vue2.0自定义指令的使用方法

    感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...

  7. Vue2.0 - 自定义指令 vue-directive

    Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...

  8. vue2.X v-model 指令

    1.v-model指令 <!DOCTYPE html> <html> <head> <title></title> <script s ...

  9. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

随机推荐

  1. ArcGIS 面要素缝隙孔洞检查代码 C# GP

    public class PolygonGapChecker : CheckProgressMessageSender, IChecker, ICheckProgressChangeEvent { p ...

  2. mySQL学习入门教程——4.内置函数

    四.内置函数: 包括了字符串函数.数值函数.日期函数.流程控制函数.其他函数(获取数据库信息)... 一.字符串函数[比较常用,需要掌握]1. concat(s1,s2,...,sn)   #把传入的 ...

  3. kubernetes容器集群部署Flannel网络

    Overlay Network:覆盖网络,在基础网络上叠加的一种虚拟网络技术模式,该网络中的主机通过虚拟链路连接起来. VXLAN:将源数据包封装到UDP中,并使用基础网络的IP/MAC作为外层报文头 ...

  4. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  5. 数据库并发及锁机制及Hibernate锁实现

    数据库事务的定义 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作.一个逻辑工作单元要成为事务,必须满足所谓的ACID(原子性.一致性.隔离性和持久性) ...

  6. python 多进程队列数据处理

    # -*- coding:utf8 -*- import paho.mqtt.client as mqtt from multiprocessing import Process, Queue imp ...

  7. 笔记70 Spring Boot快速入门(八)(重要)

    上传文件 一.方式一 1.上传页面 upLoadPage.html <!DOCTYPE html> <html lang="en"> <head> ...

  8. 常用yum源之(Percona MySQL)

    [percona]name = CentOS $releasever - Perconabaseurl=http://repo.percona.com/centos/$releasever/os/$b ...

  9. 【串线篇】概述SpringMvc和spring整合

    SpringMVC和Spring整合的目的:分工明确: SpringMVC的配置文件就来配置和网站转发逻辑以及网站功能有关的(视图解析器,文件上传解析器,支持ajax,xxx):springmvc.x ...

  10. UNP学习 Unix域协议

    Unix域协议并不是一个实际的协议族,它只是在同一台主机上进行客户-服务器通信时,使用与在不同主机上的客户和服务器间通信时相同的API的一种方法. 当客户和服务器在同一台主机上时,Unix域协议是这套 ...