vue.js槽口/具名槽口slot

槽口的作用 :
在组件里插入内容,用来混合父组件的内容与子组件自己的模板

普通槽口:
<slot></slot>,1个组件只有1个

具名槽口:
带name属性的槽口<slot name='slotA'></slot>1个组件可以有多个,具名槽口将绑定slot属性等于其name的标签

槽口的显示
槽口的显示是按照其组件顺序来显示的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue.js"></script>
</head>
<body><div id="div"><test><span slot='slotc'>槽口C</span><span slot='slotb'>槽口B</span>槽口A</test>     </div><template id="tmp"><div><h2>test</h2><slot name='slotb'></slot><slot></slot><slot name='slotc'></slot>     </div></template>
</body>
</html>
<script type="text/javascript">var vm = new Vue({el: '#div',components: {'test': {template: '#tmp'}}});
</script>

vue.js槽口/具名槽口slot相关推荐

【Vue.js 知识量化】组件化开发 + 前端模块化
Vue.js 组件化开发组件化认识组件化注册组件全局组件和局部组件父子组件组件数据父子组件的通信父->子:props 子->父:$emit() 父子组件的访问方式 $chi ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
第10章-Vue.js 项目实战
一.本节内容掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装能够使用axios进行数据请求二.webpack项目的目 ...
Vue.js slots: 为什么你需要它们？
也许你已经看过了Vue.js slots的文档.我对这个功能从"为什么你可能需要它"到"没有它我怎么可能工作"的态度转变非常快. 虽然文档已经解释了它的概念,但 ...
Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
vue事件总线_[面试] 聊聊你对 Vue.js 框架的理解
作者:yacan8 https://github.com/yacan8/blog/issues/26 本文为一次前端技术分享的演讲稿,所以尽力不贴 Vue.js 的源码,因为贴代码在实际分享中,比较枯 ...
[Vue.js] 深入 -- 组件化开发
组件化开发思想现实中的组件化思想体现标准分治重用组合组件注册全局组件注册语法 Vue.component(组件名称,{data:组件数据,template:组件模板内容 }) 组件用法 ...
Vue.js 2.6尝鲜
Vue 2.6 "Macross" 发布了,同时也是Vuejs五周年~ 在这篇文章中,将会介绍新版本的新特性, 比如slots的新语法,Vue.observable()等等 1. ...

vue.js槽口/具名槽口slot

vue.js槽口/具名槽口slot相关推荐

最新文章

热门文章