VUE学习笔记--动态组件 - 吴裕雄

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件。它的应用场景往往应用在路由控制或者 tab 切换中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换页面</button>
    <component :is="currentView"></component>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            index:0,
            arr:[
                {template:'<div>我是主页</div>'},
                {template:'<div>我是提交页</div>'},
                {template:'<div>我是存档页</div>'}
            ],
    },
        computed:{
            currentView(){
                return this.arr[this.index];
            }
        },
        methods:{
            change(){
                this.index = (++this.index)%3;
            }
        }
    })
</script>
</body>
</html>

component 标签中 is 属性决定了当前采用的子组件，:is 是 v-bind 的简写，绑定了父组 件中 data 的 currentView 属性。点击按钮时，会更改数组 arr 的索引值，同时也修改了子组 件的内容。

keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，以便提高提取效率。和 <transition> 相似，<keep-alive> 是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换页面</button>
    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            index:0,
            arr:[
                {template:'<div>我是主页</div>'},
                {template:'<div>我是提交页</div>'},
                {template:'<div>我是存档页</div>'}
            ],
        },
        computed:{
            currentView(){
                return this.arr[this.index];
            }
        },
        methods:{
            change(){
                /*es6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。*/
                let len = this.arr.length;
                this.index = (++this.index)% len;
            }
        }
        })
</script>
</body>
</html>

activated 钩子函数

Vue给组件提供了activated钩子函数，作用于动态组件切换或者静态组件初始化的过程中。activated是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件，即可以延迟执行当前的组件。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click='toShow'>点击显示子组件</button>
    <!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
    <keep-alive>
        <component v-bind:is="which_to_show" ></component>
    </keep-alive>
</div>
<script>
    // 创建根实例
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toShow: function () {   //切换组件显示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 2) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
                console.log(this.$children);
            }
        },
        components: {
            first: { //第一个子组件
                template: "<div>这里是子组件1</div>"
            },
            second: { //第二个子组件
                template: "<div>这里是子组件2,这里是延迟后的内容：{{hello}}</div>",
                data: function () {
                    return {
                        hello: ""
                    }
                },
                activated: function (done) { //执行这个参数时,才会切换组件
                    console.log('beixi')
                    var self = this;
                    var startTime = new Date().getTime(); // get the current time
                    //两秒后执行
                    while (new Date().getTime() < startTime + 2000){
                        self.hello='我是延迟后的内容';
                    }
                }
            },
            third: { //第三个子组件
                template: "<div>这里是子组件3</div>"
            }
        }
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="change">切换页面</button>
    <keep-alive>
        <home v-if="index===0"></home>
        <posts v-else-if="index===1"></posts>
        <archive v-else></archive>
    </keep-alive>
</div>
<script>
    new Vue({
        el: '#app',
        components:{
            home:{template:'<div>我是主页</div>'},
                posts:{template:'<div>我是提交页</div>'},
                    archive:{template:'<div>我是存档页</div>'},
                    },
        data:{
            index:0,
        },
        methods:{
            change(){
                //  在data外面定义的属性和方法通过$options可以获取和调用
                let len = Object.keys(this.$options.components).length;
                this.index = (++this.index)%len;
            }
        }
                })
</script>
</body>
</html>

 异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从 服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个 工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染，代码如下：

<div id="app">
        <async-example></async-example>
    </div>
    <script>
            Vue.component ( 'async-example ', function (resolve, reject){
                setTimeout (function (){
                    //向resolve 回调传递组件定义
                resolve ( {
                    template:  '<div>这是异步渲染的内容!</div>'
                })
            },1000)
        })
        new vue ( {
            el : '#app'
        })
    </script>

这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到 组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是 为了演示异步，如何获取组件取决于你自己。比如把组件配置成一个对象配置，通过 Ajax 来请求，然后调用 reslove 传入配置选项。

在 Vue 中一般很少会用到直接操作 DOM，但不可避免有时候需要用到，这时我们可以 通过 ref 和$refs 来实现：
      ref： ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件 的 $refs 对象上，如果是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果是 在子组件上，引用就指向组件的实例。 
 $refs：$refs 是一个对象，持有已注册过 ref 的所有的子组件。

普通获取 DOM 的方式 
先通过 getElementById 方法来获取，代码如下：

<div id="app">
        <input type="button" value="获取h3的值"@click="getElement"><h3 id="myh3">我是h3</ h3>
    </div>
    <script>
        var vm=new vue ( {
            el : "#app" ,
            data : { } ,
            methods : {
                getElement ( ) {
                    //通过getElementById方式获取DOM对象
                     console.log (document. getElementById ( "myh3" ) .innerHTML) ;
                }
            }
        })
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="获取h3的值" @click="getElement">
    <h3 id="myh3" ref="myh3">我是h3</h3>
    <hr>
    <login ref="mylogin"></login>
</div>
<script>
    var login = {
        template: "<h3>我是login子组件</h3>",
        data(){
        return {
            msg: "ok"
        }
    },
        methods:{
            show(){
                console.log("show方法执行了...")
            }
        }
    }
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
            getElement(){
                //通过getElementById方式获取DOM对象
                // console.log(this.$refs.myh3.innerHTML);
                console.log(this.$refs.mylogin.msg);
                this.$refs.mylogin.show();
            }
        },
     components:{
         login
     }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<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">
    <title>Document</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入bootstrap-->
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
    <cmt-box @func="loadComments"></cmt-box>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人： {{ item.user }}</span>
            {{ item.content }}
        </li>
    </ul>
</div>
<template id="tmpl">
    <div>
        <div class="form-group">
            <label>评论人：</label>
            <input type="text" class="form-control" v-model="user">
        </div>
        <div class="form-group">
            <label>评论内容：</label>
            <textarea class="form-control" v-model="content"></textarea>
        </div>
        <div class="form-group">
            <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
        </div>
    </div>
</template>
<script>
    var commentBox = {
        data() {
            return {
                user: '',
                content: ''
        }
        },
        template: '#tmpl',
        methods: {
            postComment() { // 发表评论的方法
                var comment = { id: Date.now(), user: this.user, content: this.content }
                // 从 localStorage 中获取所有的评论
                var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                list.unshift(comment)
                // 重新保存最新的 评论数据
                localStorage.setItem('cmts', JSON.stringify(list))
                this.user = this.content = ''
                this.$emit('func')
            }
        }
    }
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                { id: Date.now(), user: 'beixi', content: '这是我的网名' },
                { id: Date.now(), user: 'jzj', content: '这是我的真名' },
                { id: Date.now(), user: '贝西奇谈', content: '有任何问题可以关注公众号' }
        ]
        },
        beforeCreate(){ /* 注意：这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候,data 和 methods 都还没有被初始化好*/
    },
        created(){
        this.loadComments()
    },
        methods: {
            loadComments() { // 从本地的 localStorage 中,加载评论列表
                var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                this.list = list
            }
        },
        components: {
            'cmt-box': commentBox
        }
    });
</script>
</body>
</html>

发表于 2021-10-17 09:41 吴裕雄阅读(103) 评论(0) 编辑收藏举报