Vuejs第十二篇之动态组件全面解析
什么是组件？
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明，代码更多更全，非常适合新手学习。
官方文档：
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>
以上所述是小编给大家介绍的Vuejs第十二篇之动态组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Vue如何由本地js中存放的url地址获取图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了vue中的slot-scope及scope.row用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue在install时node-sass@4.14.1 postinstall:node scripts/buil
最近在npm install 的时候遇到了个问题,所以给大家总结下,下面这篇文章主要给大家介绍了关于vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误的解决方法,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue导出excel文件流中文乱码问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
overlay就是在地图上以另外一种形式浮现在地图上，常见的地图覆盖物为这三种类型，如：popup 弹窗、label标注信息、text文本信息等，接下来跟随小编看下openlayers6之地图覆盖物overlay详解，一起看看吧2021-09-09
在现代 web 应用程序中,图片预览功能提升了用户体验,使用户可以在上传图片之前查看图片内容,本文将详细介绍如何在 Vue.js 应用中实现图片预览功能,包括基本实现、进阶功能、与 Element UI 的集成、常见优化技巧以及与其他库的结合使用,需要的朋友可以参考下2024-09-09
今天小编就为大家分享一篇解决vue中虚拟dom,无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
虚拟列表是一种优化长列表渲染的技术,它可以在保持流畅性的同时,渲染大量的数据,本文主要介绍了如何使用vue手写一个虚拟列表,感兴趣的可以了解下2024-04-04
这篇文章主要介绍了Vue实现添加数据到二维数组并显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解vue-cli@2.x项目迁移日志，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论