Vue笔记18_插槽slot

基本使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><cpn><button>123</button><p>111</p><div>222</div></cpn><cpn></cpn><cpn></cpn><cpn></cpn></div>
<template id="cpn"><div><h2>i am zujian</h2><p>i am zujian hhh</p><slot><button>案例</button></slot>//默认值</div>
</template>
</body>
<script src="vue.js"></script>
<script>const app=new Vue({el:'#app',data:{message:''},components:{cpn:{template:'#cpn'}}})
</script>
</html>

具名插槽：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><cpn><p slot="top">biaoti</p></cpn></div>
<template id="cpn"><div><!-- 没有名字的会被替换;如果要替换有名字的，需要在父组件里面也加上相同的名字 --><slot name='top'><p>top</p></slot><slot><p>center</p></slot><slot><p>bottom</p></slot></div>
</template>
</body>
<script src="vue.js"></script>
<script>const app=new Vue({el:'#app',data:{message:''},components:{cpn:{template:'#cpn'}}})
</script>
</html>

Vue笔记18_插槽slot相关推荐

vue中的插槽--slot和v-slot
今天团队内部有一个技术分享会,主要是vue进阶这一块,我对插槽slot的认识还不清晰,于是就总结一下什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容, ...
理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用具名插槽slot 2. 编译作用 ...
vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
细讲Vue中的插槽slot
一.插槽是什么下面看一个例子写一个父组件: test.vue <template><div><div>我是父组件</div><myslot&g ...
一次性讲明白vue插槽slot
详解vue中的插槽slot 一.前言二.插槽是什么三.插槽的作用三.插槽的分类 1.默认插槽 2.具名插槽 3.作用域插槽以下文章来自掘金作者:JH30K 链接:https://juejin ...
Vue插槽 slot
1. 什么是插槽插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
vue - 插槽slot
描述:插槽,也就是slot,是组件的一块HTML模板,一个slot最核心的两个问题是显示不显示和怎样显示插槽分类: 1.1 单个插槽(单个插槽,别名默认插槽.匿名插槽,不用设置name属性) 1.2 ...
vue插槽--slot
2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...

Vue笔记18_插槽slot

Vue笔记18_插槽slot相关推荐

最新文章

热门文章