动态组件、组件缓存

最新推荐文章于 2024-07-18 14:00:18 发布

lt要努力

最新推荐文章于 2024-07-18 14:00:18 发布

阅读量474

点赞数

分类专栏： Vue 文章标签： vue动态组件组件缓存 kepp-alive

本文链接：https://blog.csdn.net/louting249/article/details/103100299

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

动态组件

通过改变值，和is属性显示相应的组件

<body>
  <div id="app">
    <select name="" id="" v-model = "val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
    <component :is = "val"></component>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  Vue.component('Father',{
    template: '<div> father </div>'
  })
  Vue.component('Son',{
    template: '<div> son </div>'
  })
  new Vue({
    el: '#app',
    data: {
      val: 'father'
    }
  })
</script>

组件缓存

keep-alive组件可以实现组件的缓存，让组件的切换能够更快 
keep-alive会激活连个钩子函数  activated   deactivated 
activated 激活，正在显示的
deactivated keep-alive被停用

<body>
  <div id="app">
    <select name="" id="" v-model = "val">
      <option value="Father"> father </option>
      <option value="Son"> son </option>
    </select>
    <keep-alive :include = "val">
      <component :is = "val"></component>
    </keep-alive>
  </div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* !keep-alive组件可以实现组件的缓存，让组件的切换能够更快 
    keep-alive会激活连个钩子函数  activated   deactivated 
      activated 激活，正在显示的
      deactivated keep-alive被停用
  */

  Vue.component('Father',{
    template: '<div> father </div>',
    activated () {
      /* !keep-alive组件专用 */
      console.log('father-activated')
    },
  })
  Vue.component('Son',{
    template: '<div> son </div>',
    activated () {
      /* !keep-alive组件专用 */
      console.log('son-activated')
    },
  })
  new Vue({
    el: '#app',
    data: {
      val: 'Father'
    },
    activated () {
      /* !keep-alive组件专用 */
      console.log('inactived')
    },
    deactivated () {
      /* !keep-alive组件专用 */
      console.log("兵哥: deactivated -> deactivated")
    }
  })
</script>

lt要努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动态组件、组件缓存

动态组件通过改变值，和is属性显示相应的组件<body> <div id="app"> <select name="" id="" v-model = "val"> <option value="father"> father </option> <option value="son"&gt...
复制链接

扫一扫

专栏目录