脚本宝典收集整理的这篇文章主要介绍了vue之组件切换,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
app.vue
<template> <div> <h1 class="mb-4">App 根组件</h1> <button tyPE="button" class="BTn btn-Primary" @click="comName = 'MyHome'">首页</button> <button type="button" class="btn btn-info ML-2" @click="comName = 'MyMovie'">电影</button> <hr /> <!-- 使用组件 --> <!-- <my-home></my-home> <my-movie></my-movie> --> <keep-alive> <component :is="comName"></component> </keep-alive> </div> </template> <script> // 导入组件 import MyHome From './Home.vue' import MyMovie from './Movie.vue' export default { name: 'MyApp', data() { return { comName: 'MyHome' } }, // 注册组件 components: { MyHome, MyMovie, }, } </script> <style lang="less" scoped></style>
home.vue
<template> <h3>Home 组件 --- {{ count }}</h3> <button type="button" class="btn btn-PRimary" @click="count += 1">+1</button> </template> <script> export default { name: 'MyHome', data() { return { count: 0, } }, created() { console.LOG('created') }, unmounted() { console.log('unmounted') } } </script> <style lang="less" scoped></style>
<template> <h3>Movie 组件</h3> </template> <script> export default { name: 'MyMovie', } </script> <style lang="less" scoped></style>
以上是脚本宝典为你收集整理的vue之组件切换全部内容,希望文章能够帮你解决vue之组件切换所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。