
组件同时加载失败:仅显示一个组件
问题描述:
在 html 代码中同时包含 和 两个 vue.component 组件,但只显示 组件, 组件被忽略。
代码示例:
立即学习“前端免费学习笔记(深入)”;
解决方案:
将 和 转换为自闭合组件,即使用 和 形式。
修改后的代码:
这样修改是因为 vue.component 组件的默认行为是将其自身和所有子元素视为模板中的插槽内容。因此,将组件作为自闭合元素可以防止其插槽内容覆盖其他组件的插槽内容。
完整的修改代码:
Document Vue.component("header-bar", { data: function() { return { homeHref: 'https://www.cnblogs.com', logo: 'https://cn.vuejs.org/images/logo.png', title: 'Vue官网图标', hotTel: '实例' } }, template: `` }); Vue.component("nav-bar", { data: function() { var n = 0; if (window.navActive) { n = window.navActive; } return { navList: [{ href: 'https://www.cnblogs.com', title: '博客园' }], navActive: n } }, template: ` `, mounted: function() { $("a.navmenu").eq(this.navActive).addClass("active"); } }); new Vue({ el: '.content', }) @@##@@全国免费加盟热线:
{{hotTel}}
以上就是Vue.component 组件同时加载失败:为什么只显示一个组件?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1495719.html
微信扫一扫
支付宝扫一扫