0%

Vue 动态组件

发布于 / 分类: vue前端开发快速入门与专业应用 / 暂无评论 / 阅读量 64

最后更新于 2019年11月20日

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要先运行。

制作一个简单的modal模态框 Vue 路由
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao