木灵鱼儿

木灵鱼儿

阅读：2071

最后更新：2019/11/20/ 0:46:36

Vue 动态组件

component

通过compoent标签加上:is就可以判断让哪些组件显示。

compoent可以理解为一个所有组件的母体，它包含了所有的组件，通过:is的值就可以让对应的组件显示出来。

<div id="app">
    <ul>
        <li @click="showview='home'">主页</li>
        <li @click="showview='list'">列表</li>
        <li @click="showview='about'">关于</li>
    </ul>
    <component :is="showview"></component>
</div>
var app = new Vue({
    el : '#app',
    data : {
        showview : 'home'
    },
    components : {
        home : {
            template : '<h2>主页</h2>'
        },
        list : {
            template : '<h2>列表</h2>'
        },
        about : {
            template : '<h2>关于</h2>'
        }
    }
});

keep-alive

:is属性每次让元素显示或者隐藏都是一次完整的渲染，如果说这个显示的内容是不需要每次显示都更新一次，那么就可以使用keep-alive标签包裹，这样vue就会将隐藏的内容暂存在内存中，显示时在拿出来，以减少性能消耗。

<div id="app">
    <ul>
        <li @click="showview='home'">主页</li>
        <li @click="showview='list'">列表</li>
        <li @click="showview='about'">关于</li>
    </ul>
    <keep-alive>
        <component :is="showview"></component>
    </keep-alive>
</div>
var app = new Vue({
    el : '#app',
    data : {
        showview : 'home'
    },
    components : {
        home : {
            template : '<div>\
            <h2>主页</h2>\
                <ul>\
                    <li v-for="(item,index) in items" :key="index">{{item}}</li>\
                </ul>\
            </div>',
            data(){
                return {
                    items : []
                }
            },
            mounted : function(){
                console.log('1');
                this.items = [1,2,3,4,5]
            }
        },
        list : {
            template : '<h2>列表</h2>'
        },
        about : {
            template : '<h2>关于</h2>'
        }
    }
});

我们给home组件添加一个mounted的生命周期钩子，表示元素渲染后会运行里面的内容。

当我们切换的时候，会发现，除了第一次console.log('1')运行了，后面都没有再重复了，表示这个生命周期并没有结束， keep-alive有效。

注意
keep-alive也可以不和component配合使用，keep-alive可以包裹多个子组件，只要确保所有的子组件只要一个是激活状态，其他都是隐藏的，比如使用v-if/v-else。

集中式事件处理器

由于子组件和父组件之前是相对独立的，那么事件的创建触发相对来说会很麻烦，像之前的使用props来接受父组件的方法，$emit来传参这些都很麻烦，我们可以创建一个空的vue实例，然后对这个实例进行事件的集中处理。

首先创建一个空的vue实例

var bus = new Vue();

然后对这个实例使用$on方法创建并监控一个自定义事件和方法

bus.$on('create', function(data) {
    alert(data);
})

然后我们通过$emit来触发这个bus的自定义事件，就可以做到快速传值了，也没有之前做的那么麻烦

假设我们要在某个按钮click后才触发

bus.$emit('create','666');

通过一个全局的实例bus，我们可以在任何地方访问，方便于集中管理，所有的通信类事件都可以通过该方式做到，并且还可以在函数作用域下拿到父级的this来操作对应的内容。

然后触发$emit和监控$on，都可以自由的放置在不同的组件中，注意on要先运行。

文章分类 vue前端开发快速入门与专业应用
文章标签 vue
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 2071

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2071

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译