Vue.js动态组件解析

更新时间：2016年09月09日 09:12:47 作者：qq20004604

这篇文章主要为大家详细介绍了Vue.js动态组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

本文是在官方文档的基础上，更加细致的说明，代码更多更全。
简单来说，更适合新手阅读

①简单来说：

就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

②动态切换：

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

改变挂载的组件，只需要修改is指令的值即可。

如示例代码：

 <div id="app">
 <button @click="toshow">点击让子组件显示</button>
 <component v-bind:is="which_to_show"></component>
</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 < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 }
 },
 components: {
 first: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2</div>"
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 },
 }
 });
</script>

说明：

点击父组件的按钮，会自动切换显示某一个子组件（根据which_to_show这个变量的值来决定）。

③keep-alive

简单来说，被切换掉（非当前显示）的组件，是直接被移除了。

在父组件中查看this.$children属性，可以发现，当子组件存在时，该属性的length为1，而子组件不存在时，该属性的length是0（无法获取到子组件）；

假如需要子组件在切换后，依然需要他保留在内存中，避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。

如代码：

 <div id="app">
 <button @click="toshow">点击让子组件显示</button>
 <component v-bind:is="which_to_show" keep-alive></component>
</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 < 3) {
  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</div>"
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 },
 }
 });
</script>

说明：

初始情况下，vm.$children属性中只有一个元素（first组件），点击按钮切换后，vm.$children属性中有两个元素，再次切换后，则有三个元素（三个子组件都保留在内存中）。

之后无论如何切换，将一直保持有三个元素。

④activate钩子

简单来说，他是延迟加载。

例如，在发起ajax请求时，会需要等待一些时间，假如我们需要在ajax请求完成后，再进行加载，那么就需要用到activate钩子了。

具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。

为了证明他的延迟加载性，在服务器端我设置当发起某个ajax请求时，会延迟2秒才返回内容，因此，第一次切换组件2时，需要等待2秒才会成功切换：

 <div id="app">
 <button @click="toshow">点击让子组件显示</button>
 <component v-bind:is="which_to_show"></component>
</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 < 3) {
  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，这里是ajax后的内容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 },
 activate: function (done) { //执行这个参数时，才会切换组件
  var self = this;
  $.get("/test", function (data) { //这个ajax我手动在服务器端设置延迟为2000ms，因此需要等待2秒后才会切换
  self.hello = data;
  done(); //ajax执行成功，切换组件
  })
 }
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 }
 }
 });
</script>

代码效果：

【1】第一次切换到组件2时，需要等待2秒后才能显示（因为发起ajax）；

【2】在有keep-alive的情况下，第二次或之后切换到组件2时，无需等待；但ajax内容，需要在第一次发起ajax两秒后才会显示；

【3】在无keep-alive的情况下（切换掉后没有保存在内存中），第二次切换到组件2时，依然需要等待。

【4】等待时，不影响再次切换（即等待组件2的时候，再次点击切换，可以直接切换到组件3）；

说明：

【1】只有在第一次渲染组件时，才会执行activate，且该函数只会执行一次（在第一次组件出现的时候延迟组件出现）

【2】没有keep-alive时，每次切换组件出现都是重新渲染（因为之前隐藏时执行了destroy过程），因此会执行activate方法。

⑤transition-mode过渡模式

简单来说，动态组件切换时，让其出现动画效果。（还记不记得在过渡那一节的说明，过渡适用于动态组件）

默认是进入和退出一起完成；（可能造成进入的内容出现在退出内容的下方，这个下方指y轴方面偏下的，等退出完毕后，进入的才会出现在正确的位置）；

transition-mode=”out-in”时，动画是先出后进；
transition-mode=”in-out”时，动画是先进后出（同默认情况容易出现的问题）；

示例代码：（使用自定义过渡名和animate.css文件）

<div id="app">
 <button @click="toshow">点击让子组件显示</button>
 <component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>
</div>
<script>
 Vue.transition("bounce", {
 enterClass: 'bounceInLeft',
 leaveClass: 'bounceOutRight'
 })
 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 < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 }
 },
 components: {
 first: { //第一个子组件
 template: "<div>这里是子组件1</div>"
 },
 second: { //第二个子组件
 template: "<div>这里是子组件2，这里是ajax后的内容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 }
 },
 third: { //第三个子组件
 template: "<div>这里是子组件3</div>"
 }
 }
 });
</script>

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

五分钟教你使用vue-cli3创建项目(新手入门)
本文主要介绍了五分钟教你使用vue-cli3创建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧
2018-08-08
vuejs使用$emit和$on进行组件之间的传值的示例
本篇文章主要介绍了vuejs使用$emit和$on进行组件之间的传值的示例，具有一定的参考价值，有兴趣的可以了解一下
2017-10-10
Vue中的computed属性详解
这篇文章主要为大家介绍了Vue中的computed属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
vue如何通过日期筛选数据
这篇文章主要介绍了vue如何通过日期筛选数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue实现路由跳转至外界页面
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue组件通信入门之Provide和Inject机制
这篇文章主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-12-12
elementui 开始结束时间可以选择同一天不同时间段的实现代码
这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
2024-02-02
vuex-persist 使用场景分析
Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库,它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题,本文给大家介绍vuex-persist 可以用来干什么,感兴趣的朋友一起看看吧
2023-11-11
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下
2023-11-11

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

Vue.js动态组件解析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具