Vue slot简单理解
2018-06-24 00:11:56来源：未知 阅读 ()
情形一：
子组件定义了具名的slot，父组件使用具名的slot，slot显示顺序为子组件定义slot的顺序
子组件：
Vue.component('child',{
template:`<div class="child"><slot name="one"></slot><slot name="two"></slot></div>`
});
父组件使用子组件：
<child> <h1 slot="two" class="two">woshi two</h1> <h2 slot="one" class="one">woshi one</h2> </child>
显示顺序按照子组件slot定义的顺序。
情形二：
子组件定义了不具名的slot,父组件直接使用子组件，并可以直接在子组件中写内容
子组件：
Vue.component('btn',{
template:`<div class="button">
<slot></slot>
</div>`
});
父组件：
<btn> 按钮 </btn>
情形三：
子组件slot中定义了默认内容，如果父组件引入了子组件，且不写内容，则显示子组件默认内容，子组件定义的默认内容也可以提前加任何样式或赋予任何标签。但是slot标签上不可以加任何样式。如果父组件引入定义了slot的子组件，并且赋予了内容，则子组件默认的slot中的标签与样式不会加上去。如果想要给slot加样式，要加在父组件上。
子组件：
Vue.component('aaa',{
template:`<div>
<slot><h1 style="color:red">woshi slot默认内容</h1></slot>
</div>`
});
父组件：
<aaa></aaa> <aaa><h6>哈哈哈哈哈</h6></aaa> <aaa>哈哈哈哈哈</aaa>
vue dom元素挂载：
new Vue({ el:"#app" })
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：面试题之（冒泡排序）
- JS简单去除数组中重复项的方法 2020-03-16
- vue.js开发环境搭建教程 2020-03-16
- JS判断浏览器是否安装flash插件的简单方法 2020-03-12
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- JavaScript简单下拉菜单特效 2020-02-22
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
