vue slot 在子组件中显示父组件传递的模板
2018-03-02 10:58
696 查看
父组件使用没有指定slot属性,默认为default
在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app"> <modal> <!-- 调用父组件的方法 --> <h1 @click='click'>aaa</h1></modal> <modal> <h2>bbb</h2></modal> <modal> <!-- 使用slot设置模板中的名字,会插入到指定的slot中 --> <p slot='title'>hello</p> <p slot='content'> world </p> </modal> <modal></modal> </div> <template id="modal"> <!-- 使用slot在子组件中显示父组件传过来的模板 --> <div> modal <slot name='default'>如果没有会使用这个默认值</slot> <h1> title: <slot name='title'> </slot> </h1> content: <slot name='content'></slot> </div> </template> <script type="text/javascript"> let modal = { template: '#modal' } new Vue({ el: '#app', components: { // es 简写 ,只写一个的意思为 // modal:modal modal }, methods: { click() { console.log('aaa') } } }) </script> </body> </html>
总结
以上所述是小编给大家介绍的vue slot 在子组件中显示父组件传递的模板,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue slot 在子组件中显示父组件传递的模板
- 给ajax留一个模板,通过后台传递json获取数据,并用table显示,方便以后使用
- Angular 向组件传递模板的几种方法
- Angular 向组件传递模板的两种方法
- Delphi开发ASP COM组件显示图片
- 解决代码着色组件SyntaxHighlighter行号显示问题
- 可循环显示图像的Android Gallery组件
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现大数据的高效分页显示
- gcc2.95下 使用ns2.1b8a-allinone 然后配合ns2.30中的ns外其他组件进行安装 ns2.1b8a 同时使得nam中文字得以显示
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- Flex组件:模板组件
- 组件拖动显示
- Android开发中自定义View设定到FrameLayout布局中实现多组件显示
- 弹出 提示窗口 背景显示灰色 可移动 模板
- Android 在activity中显示非view组件eg:GLSurfaceView
- 基于.net技术的代码高亮显示组件
- 采用JAVA组件显示本地图片
- [模板制作技巧2]水晶报表的分栏显示
- Delphi for iOS开发指南(9):在iOS应用程序中使用ListBox组件来显示TableView
- EasyUI 之 DataGrid分页组件中文显示的两种方法(语言的切换)