vue3.0动态组件,vue用于动态切换组件的内置组件

  vue3.0动态组件,vue用于动态切换组件的内置组件

  本文主要介绍vue的动态组件。vue提供了一个内置组件,专门用来渲染动态组件。这个标签相当于一个占位符,您需要使用is属性来指定绑定的组件。想了解更多细节的,可以参考下面这篇文章的具体内容。

  

目录

   1、组件2、保持活动2.1问题2.2使用保持活动来解决2.3保持活动生命周期2.4保持活动的包含、排除属性

  

1、component

  如何实现动态组件渲染

  Vue提供了一个内置组件,专门用来渲染动态组件。

  这个标记相当于一个占位符,您需要使用is属性来指定绑定的组件。

  Button @click=comName=Left 显示左边/button

  Button @click=comName=Right 显示右边/button

  div class=box

  !-渲染左组件和右组件-

  !-组件组件内置于Vue中-

  !- is表示要呈现的组件的名称-

  组件:is= com name /组件

  /div

  脚本

  从 @/components/Left . vue 导入左侧

  从“@/components/Right.vue”导入权限

  导出默认值{

  组件:{

  左边,

  对吧

  },

  data() {

  返回{

  //comName表示要显示的组件的名称。

  comName:左,

  }

  }

  }

  /脚本

  

2、keep-alive

  

2.1存在的问题

  当左边组件实现一个按钮加一个功能时,增加一个后切换组件,再切换回来。

  如下所示,在左侧添加一个函数

  div class=左容器

  H3组件-{{count}}/H3

  button @click=count=1 1/button

  /div

  脚本

  导出默认值{

  data(){

  返回{

  计数:0

  }

  }

  }

  /脚本

  操作,加完一个,切换到右边的组件,再切换回来,发现组件里的数据已经被重写初始化了。

  使用Vue的生命周期查看左侧组件。

  是在下面左边增加了生命周期功能。

  导出默认值{

  已创建(){

  Console.log(左侧组件已创建!)

  },

  destoryed(){

  Console.log(左侧组件被破坏~ )

  }

  }

  再次执行上诉操作后,得到的结果如下:

  存在的问题:切换组件时,组件会被销毁和创建,这样每次切换到同一个组件时,组件对象就不会一样,初始化数据也会被重写。

  

2.2使用keep-alive解决

  Keep-alive组件也是Vue的内置组件,可以直接使用。

  在App根组件中如下修改:

  点火电极

  !- keep-alive可以缓存内部组件,而不是销毁它们-

  组件:is= com name /组件

  /保持活力

  

2.3keep-alive的生命周期

  只有当组件使用保持活动时,才能使用此生命周期。

  缓存组件时会自动触发Deactivated。

  当组件被激活时自动触发。

  将以下修改添加到左侧组件中

  //第一次创建组件时,会先触发created,再触发activated。

  //当一个组件被激活时,只会触发activated,不会创建。

  已激活(){

  Console.log(组件已激活,已激活)

  },

  停用(){

  Console.log(组件被缓存、停用)

  }

  

2.4keep-alive 的 include, exclude属性

  缺省情况下,Keep-alive缓存由keep-alive包装的组件中的所有组件。

  如何指定需要缓存的组件呢:

  使用include/exclude属性,而不是两者都使用。

  keep-alive包括=Left,MyRight

  组件:is= com name /组件

  /保持活力

  以上指定了需要缓存的组件名称:请注意此处组件的名称。

  Left组件中:

  导出默认值{}

  Right组件中:

  导出默认值{

  //当提供name属性时,组件的名称就是name属性的值。

  名称:“MyRight”

  }

  区分:组件中的名称属性和组件外的注册名称之间的关系

  组件外:

  导入Left @/components/Left.vue

  组件:{

  左边,

  }

  这里的注册名称只是用于组件的引用,如果组件中没有name属性,那么这个名称默认为注册名称。

  组件内:

  导出默认值{

  //当提供name属性时,组件的名称就是name属性的值。

  名称:“MyRight”

  }

  name属性在组件中声明。调试工具中显示的组件标签是名称,标签中的缓存函数也使用名称。

  这就是这篇关于vue动态组件的文章。有关vue动态组件的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: