a标签 vue 动态点击_【Vue】Vue学习之动态组件

在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。

---摘自《Vue.js从入门到项目实战》

学习过动态组件过后，我来分享个人见解，希望可以帮到同样在学习Vue的朋友们。

Vue是完全面向于前端，实现了真正的前后端分离开发，提供给了我们非常多的辅助开发的功能，不仅用于简化代码，还能够完美的完成开发者的需求。动态组件就是其中之一，下面我来介绍这个功能的实现效果。

通过阅读Vue官方文档我看到了动态组件的实现效果如下图。

点击"Posts"标签时，呈现页面是这一页

点击"Archive"标签时，呈现的页面是这一页

这样实现了动态切换页面的效果，究竟要怎么样实现这种效果呢？一起往下看吧

动态组件component的用法

component会接收一个名为"is"的属性

is的属性值应该为在父组件中注册过的组件的名称

用法如下:

  <component v-bind:is="view"></component> //view 是变量

再来写一段实例代码:

<div id="app">
	<ul>
	    <li class="per-tab" @click="toggleView('Home')">Home</li>
	    <li class="per-tab" @click="toggleView('About')">About</li>
	</ul>
	<div class="tab-content">
	    <component :is="view"></component> <!-- view为变量 -->
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    let Home = {//Home组件
        template:'<p style="color:#787878;">Hello Home!</p>'
    }
    let About = {//About组件
        template:'<p>Hello About!</p>'
    }
    let vm = new Vue({
        el:'#app',
        components:{Home,About},
        data(){
            return{
                view:'Home'
	    }
	},
    methods:{
        toggleView(view){
            this.view = view
        }
    }
})

---示例代码摘自《Vue.js从入门到项目实战》

从这段代码可以看出,目的是点击两个无序列表项，切换不同的组件用于显示。

初始时,is的值在实例中被定义为:Home,所以一开始显示的是Home组件中的内容，当点击"About"时，Vue创建一个新的view(组件)实例，这就是动态组件component的原理

——组件实例的创建与失活

组件的缓存

若是我们不想要每次创建Vue组件实例时都要重新渲染那么大的开销，我们可以使用<keep-alive>组件.

keep-alive是一个抽象组件，即它既不渲染任何DOM元素，也不会出现在组件结构树中。我们可以使用它缓存一些非动态的组件实例(无数据变化)，以保留组件状态或者减少重新渲染的开销。

---摘自《Vue.js从入门到项目实战》

keep-alive应该出现在组件被移除之后需要再次挂载的地方，比如使用动态组件时：

<keep-alive>
    <component :is="view"></component>
</keep-alive>

或者是使用v-if时：

<keep-alive>
    <first v-if="first"></first>
    <second v-else></second>
</keep-alive>

看书上的话也太专业了，不如自己总结一下，说白了,<keep-alive>就是一个壳子，套在有组件的销毁和重新出现的地方，成为了组件们的"免死金牌",keep-alive也不会在组件树中占有一席之地，它只是一个抽象的组件，服务与其它组件。

keep-alive还可以接收两个props属性:

1. include
2. exlude

它们的共同点就是值都为"字符串"或"正则表达式"，include代表匹配的组件会被缓存，exlude代表匹配的组件不会被缓存。

关于动态组件，我总结的就这么多，希望可以帮到和我一样在学习Vue的朋友们。