442 vue内置组件keep-alive：include，配合路由

2020-04-13 20:00:47 阅读：290 来源： 互联网

标签：Vue const name 442 two alive keep template 组件

11-内置组件02-keepAlive.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
       component 内置组件
       keep-alive 缓存
     -->

    <div id="app">
        <button @click="fn('one')">One</button>
        <button @click="fn('two')">Two</button>

        <!-- 
        is : 负责显示哪个组件
        值 : 组件的名称 , name 
       -->
        <!-- 1. 全部缓存 -->
        <!-- <keep-alive>
        <component :is="componentName">
          <one></one>
          <two></two>
        </component>
      </keep-alive> -->

        <!-- 2. 只缓存其中一个 -->
        <keep-alive include="one,two">
            <component :is="componentName">
                <one></one>
                <two></two>
            </component>
        </keep-alive>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.component('one', {
            name: 'one',
            template: `<div> 子组件 one: <input>  </div>`
        })
        Vue.component('two', {
            name: 'two',
            template: `<div> 子组件 two:  <input> </div>`
        })

        const vm = new Vue({
            el: '#app',
            data: {
                componentName: 'one'
            },
            methods: {
                fn(name) {
                    this.componentName = name
                }
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 方式1 -->
        <!-- <keep-alive>
        <router-view></router-view>
      </keep-alive> -->

        <!-- 方式2  -->
        <!-- 需要缓存的，加keep-alive -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    
    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>

    <script>
        // 和路由配合的时候，【局部】组件就不需要到 Vue实例 中注册了
        const One = {
            template: `
                <div> 子组件 one:  <input> </div>
            `
        }
        
        const Two = {
            template: `
                <div> 子组件 two: <input> </div>
            `
        }

        // 实例路由
        const router = new VueRouter({
            routes: [
                {
                    path: '/one',
                    name: 'one',
                    component: One,
                    meta: { keepAlive: true }
                },
                {
                    path: '/two',
                    name: 'two',
                    component: Two,
                    meta: { keepAlive: false }
                }
            ]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

标签：Vue,const,name,442,two,alive,keep,template,组件
来源： https://www.cnblogs.com/jianjie/p/12693548.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

442 vue内置组件keep-alive：include，配合路由

11-内置组件02-keepAlive.html