木灵鱼儿

木灵鱼儿

阅读：1232

最后更新：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
木灵鱼儿

木灵鱼儿

发布了 562 篇文章获得点赞 0获得阅读 1232

版权申明

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

one
two
three

关于作者

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

相关文章

scss 自动生成margin和padding的classscss 自动生成margin和padding的class
深度合并对象的方法深度合并对象的方法
vue 过滤器 驼峰与短横线相互转换的方法vue 过滤器 驼峰与短横线相互转换的方法
利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题