vue的实名插槽
2017-11-22 17:29
246 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue1.0.25.js" ></script> </head> <body> <div id="app"> <my-slot> <div slot='cpu'>vvvvvvv</div> <img slot='gpu' 4000 src="04表单提交/img/ad.png"/> </my-slot> </div> <template id="my_computer"> <div id="main"> <slot name='cpu'>这是插入cpu的</slot><br> <slot name='gpu'>这是插入gpu的</slot><br> <slot name='ccc'>这是插入内存条的</slot><br> <slot name='yyy'>这是插入硬盘的</slot><br> <slot name='shu'>这是插入数据线的</slot><br> </div> </template> <script type="text/javascript"> Vue.component( 'my-slot',{ template:'#my_computer' } ) new Vue({ el:'#app', data:{ totalcount:0 }, methods:{ allcounter(){ this.totalcount+=1 } } }) </script> </body> </html>
相关文章推荐
- Vue使用具名插槽细节
- Vue——Slot(插槽)
- vue动态组件和slot插槽
- React(12)组合(类似 Vue 组件的插槽)和继承
- vue 中的 $slot 获取 插槽的节点
- vue组件插槽
- 详解vue slot插槽的使用方法
- vue的匿名插槽
- Vue中的slot使用插槽分发内容的方法
- vue 插槽分发内容
- vue组件-template 和slot插槽
- VUE中solt内容插槽与ng4中投影的使用
- Vue------第五天(关于组件的一些基础了解,包括组件的注册、Prop、自定义事件、使用插槽分发内容等)
- vue 插槽slot
- vue作用域插槽例子
- Vue 作用域插槽 列表组件 示例
- Vue组件-使用插槽分发内容
- Vue 组件3 作用域插槽
- Vue 作用域插槽
- vue——使用插槽分发内容