vue.js - vue两个组件切换、加载问题

问题描述

问 题

想做一个类似博客文章列表，有详情的和简单的两种情况,点击不同按钮加载不同的文章信息，两个我分别封装成两个组件，一个是<article-list>,另一个是<article-box>。
现在我想根据选中不同的按钮，加载不同的组件。好像不能直接$("#main").html("<article-list />")，好像直接把他变为文本了。所以怎么才能根据点击不同的按钮加相应的组件呢？

    $(".glyphicon-list").click(function() {
        if(!$(this).hasClass("active")) {
            $("#article").html('<article-list />');
            $(this).siblings().removeClass("active").addClass('active');
        }
    });
    $(".glyphicon-th").click(function() {
        if(!$(this).hasClass("active")) {
            $("#article").html('<article-box />');
            $(this).siblings().removeClass("active").addClass('active');
        }
    })

解决方案

翻了翻官网的教程，发现是 动态组件。 多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性。
http://cn.vuejs.org/v2/guide/...动态组件

这篇关于vue.js - vue两个组件切换、加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！