vue——组件高级之动态组件、缓存组件、异步组件

 一、v-if 切换组件

  父组件App.vue：

<script>
import Box1 from "./Box1.vue";
import Box2 from "./Box2.vue";
import Box3 from "./Box3.vue";
export default {
  data() {
    return {
		arr:[false,false,false]
	};
  },
  methods: {
    fn(index) {
		this.arr.fill(false)
		console.log("点击了box"+(index+1))
		this.$set(this.arr,index,true)
	}
  },
  components: {
    Box1,
    Box2,
    Box3
  }
};
script>
 

  子组件 Box1.vue   Box2.veu  Box3.vue文件 类似:

 
<script>
	export default {}
script>

 结果显示：

二、动态组件：

component 标签的 is属性

语法：is后跟组件的变量名决定使用哪个组件来渲染

两种写法：

•    代表==>

注意: is是组件名  :is是data中的变量中保存的组件名

  父组件App.vue：

<script>
import Box1 from "./Box1.vue";
import Box2 from "./Box2.vue";
import Box3 from "./Box3.vue";
export default {
  data() {
    return {
		mycomponent:""
	};
  },
  methods: {
    fn(component) {
		this.mycomponent=component
        console.log("点击了"+component)
	}
  },
  components: {
    Box1,
    Box2,
    Box3
  }
};
script>

  子组件 Box1.vue   Box2.veu  Box3.vue文件 类似:

 
<script>
	export default {}
script>

  结果显示： 

 三、缓存组件keep-alive ：

• 动态组件切换时，会把切换前的组件销毁了 只留下当前组件，每次切换新组件的时候，Vue 都创建了一个新的组件对象。
• 有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件就引入缓存组件 。
• keep-alive可以缓存动态切换的组件

   keep-alive提供的属性：

• include 设置需要缓存的组件 （组件名/正则）
• exinclude 设置不需要缓存的组件 （组件名/正则）
• :max 缓存最近切换的几个组件

   keep-alive提供的钩子函数：

      必须在keep-alive里使用：activated  deactivated

• activated：页面第一次进入的时候，钩子触发的顺序是 created->mounted->activated
• deactivated: 页面退出的时候会触发 deactivated，当再次前进或者后退的时候只触发 activated

   父组件App.vue：

<script>
import Box1 from "./Box1.vue";
import Box2 from "./Box2.vue";
import Box3 from "./Box3.vue";
export default {
  data() {
    return {
      mytemp: ""
    };
  },
  methods: {
    fn(component) {
      this.mytemp = component;
      console.log("点击了" + component);
    }
  },
  components: {
    Box1,
    Box2,
    Box3
  }
};
script>

   子组件 Box1.vue :