We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
// tab1组件 <template> <div class="tab">我是tab1组件</div> </template> <style > .tab { font-size: 30px; } </style>
// tab2组件 <template> <div class="tab">我是tab2组件</div> </template> <style > .tab { color: red; } </style>
// 入口组件 <template> <div id="app"> <div class="box"> <div @click="tab('tabOne')" class="btn">切换tab1</div> <div @click="tab('tabTwo')" class="btn">切换tab2</div> </div> <component v-bind:is="currentTabComponent"></component> </div> </template> <script> import tabOne from './tab1.vue' // tab2组件一开始还未被使用,但是组件内的样式却已经被注入到head内 import tabTwo from './tab2.vue' export default { components: { tabTwo, tabOne, }, data() { return { currentTabComponent: 'tabOne' } }, methods: { tab(val) { this.currentTabComponent = val } } } </script> <style> .box{ display: flex; justify-content: center; align-items: center; width: 100%; } .btn{ font-size: 20px; text-align: center; flex: 1; background: #ccc; margin: 10px; } </style>
The text was updated successfully, but these errors were encountered:
https://github.com/ETTTTT/component-demo/blob/master/img/c0e434cf216d20e3d2d71694ed31d0a9.png css 被引入的截图 复现的demo仓库:https://github.com/ETTTTT/component-demo
Sorry, something went wrong.
使用webpack启动的项目不会有这个问题, 使用vue-cli创建的项目,启动会有这个问题
组件没有被加载之前,组件的样式被提前注入到head内了
No branches or pull requests
The text was updated successfully, but these errors were encountered: