Vue.js--组件高级用法--动态组件、异步组件

动态组件

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


<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">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>动态组件title>
head>
<body>
    <div id="app">
        <component :is="currentView">component>
        <button @click="handleChangeView('A')">切换到Abutton>
        <button @click="handleChangeView('B')">切换到Bbutton>
        <button @click="handleChangeView('C')">切换到Cbutton>
    div>
    <script>
        var app = new Vue({
            el: '#app',
            components: {
                comA: {
                    template: '
组件A
'
}, comB: { template: '
组件B
'
}, comC: { template: '
组件C
'
} }, data: { currentView: 'comA' }, methods: { handleChangeView: function (compnent) { this.currentView = "com" + compnent; } } });
script> body> html>

在这里插入图片描述动态地改变currentView的值就可以动态挂载组件了。也可以直接绑定在组件对象上。

<div id="app">
    <component :is="currentView">component>
div>
<script>
    var Home = {
        template: '

Welcome home!

'
}; var app = new Vue({ el: '#app', data: { currentView: Home } });
script>

异步组件

当工程足够大,使用的组件足够多时,是时候考虑下性能问题了,因为一开始把所有的组件都加载是没有必要的一笔开销。好在Vue.js允许将组件定义为一个工厂函数,动态地解析组件。Vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。


<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">
    <script src="https://unpkg.com/vue/dist/vue.js">script>
    <title>异步组件title>
head>
<body>
    <div id="app">
        <child-component>child-component>
    div>
    <script>
        Vue.component('child-component',function (resolve, reject) {
            window.setTimeout(function () {
                resolve({
                    template: '
我是异步渲染的
'
}); }, 2000); }); var app = new Vue({ el: '#app' });
script> body> html>

工厂函数接收一个resolve回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax来请求,然后调用resolve传入配置选项。

你可能感兴趣的:(Vue.js)