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+element实现输入密码锁屏

    vue+element实现输入密码锁屏

    这篇文章主要为大家详细介绍了vue+element实现输入密码锁屏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue2 拖动排序 vuedraggable组件的实现

    vue2 拖动排序 vuedraggable组件的实现

    这篇文章主要介绍了vue2 拖动排序 vuedraggable组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue.js实现可排序的表格组件功能示例

    Vue.js实现可排序的表格组件功能示例

    这篇文章主要介绍了Vue.js实现可排序的表格组件功能,涉及vue.js事件响应、元素动态操作、排序、运算等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • vue实现表单验证小功能

    vue实现表单验证小功能

    这篇文章主要为大家详细介绍了vue实现表单验证小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue2项目增加eslint配置代码规范示例

    vue2项目增加eslint配置代码规范示例

    这篇文章主要为大家介绍了vue2项目增加eslint配置代码规范示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue3中el-uplod结合ts实现图片粘贴上传

    vue3中el-uplod结合ts实现图片粘贴上传

    本文主要介绍了vue3中el-uplod结合ts实现图片粘贴上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue+el-element中根据文件名动态创建dialog的方法实践

    vue+el-element中根据文件名动态创建dialog的方法实践

    本文主要介绍了vue+el-element中根据文件名动态创建dialog的方法实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vuex vue简单使用知识点总结

    vuex vue简单使用知识点总结

    在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结,有需要的朋友们可以参考下。
    2019-08-08
  • vue实现动态列表尾部添加数据执行动画

    vue实现动态列表尾部添加数据执行动画

    这篇文章主要介绍了vue实现动态列表尾部添加数据执行动画方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue组件学习教程

    vue组件学习教程

    这篇文章主要为大家详细介绍了vue组件学习教程,根据Vue官方文档学习的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论