vue第十一单元(内置组件)

第十一单元(内置组件)

#课程目标

1. 熟练掌握component组件的用法
2. 熟练使用keep-alive组件

#知识点

#1.component组件

component是vue的一个内置组件，作用是：配合is动态渲染组件

<component :is='组件'></component>

1

不同组件之间进行动态的切换

App.js:

<template>
  <div>
    <div>
      <div>
        <button @click="handleShow('Login')">登录</button>
        <button @click="handleShow('Index')">首页</button>
      </div>
      <component :is="name"></component>
    </div>
  </div>
</template>

<script>
import Login from "./components/Login";
import Index from "./components/Index";

export default {
  data() {
    return {
      name: "Login",
    };
  },
  components: {
    Login,
    Index
  },
  methods: {
    handleShow(name) {
      this.name = name;
    },
  },
  mounted() {
    console.log('挂载父组件')
  }
};
</script>

 

components/Login.vue:

<template>
  <div>
    登录
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('挂载登录组件')
  },
  beforeDestroy() {
    console.log('销毁登录组件')
  }
}
</script>

<style>

</style>

 

components/Index.vue:

<template>
  <div>
    首页
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('挂载首页组件')
  },
  beforeDestroy() {
    console.log('销毁首页组件')
  }
}
</script>

<style>

</style>

 

我们在父组件和子组件中分别定义个生命周期钩子mounted，页面加载到完成，父组件先渲染完成还是子组件先渲染完成呢？答案是子组件先渲染完成。

参考链接：https://blog.csdn.net/qq_42778001/article/details/99091540

#2.keep-alive组件

两个组件进行切换时，一个组件显示，另一个是组件隐藏还是销毁呢？答案是不断的创建与销毁的过程。 如果你想把组件的缓存下来，可以在动态组件上使用vue另一个内置组件keep-alive

    <keep-alive>
        <component :is='state'></component>
    </keep-alive>

 

这样，当切换组件时，组件会被缓存下来，不会执行created 、mounted、beforeDestroy钩子函数。

是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。