Vue中实现用动态组件代替路由的效果

最新推荐文章于 2023-05-31 15:16:44 发布

Yasuo Man

最新推荐文章于 2023-05-31 15:16:44 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： Vue Vue组件

本文链接：https://blog.csdn.net/Meraln/article/details/100552566

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue中实现用动态组件代替路由的效果

Vue.js提供了一个特殊的元素用来动态地挂载不同的组件，使用 is 特性来选择要挂载的组件。

话不多说，直接上代码

可直接复制粘贴运行。一个简易的动态组件Demo，仅供参考

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">切换到A</button>
        <button @click="handleChangeView('B')">切换到B</button>
        <button @click="handleChangeView('C')">切换到C</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            components: {
                comA: {
                    template: '<div>组件A</div>'
                },
                comB: {
                    template: '<div>组件B</div>'
                },
                comC: {
                    template: '<div>组件C</div>'
                }
            },

            data:{
                currentView:'comA'
            },

            methods:{
                handleChangeView:function(component){
                    this.currentView = 'com' + component
                }
            }
        })
    </script>
</body>

</html>

Yasuo Man

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中实现用动态组件代替路由的效果

Vue中实现用动态组件代替路由的效果话不多说，直接上代码可直接复制粘贴运行。一个简易的动态组件Demo，仅供参考<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
复制链接

扫一扫