动态组件，异步组件，mixin混入

动态组件

适用于不同组件间的切换

<template>
<div>
<button @click="change('Child')" >t跳转child组件</button>//点击这个按钮则显示Child组件
//通过methods方法传参，不断切换zujian 属性值，实现不同组件的切换
<button @click="change('Order')" >t跳转order组件</button>//点击这个按钮则显示order组件
<h2>当前组件显示的</h2>
<component :is="zujian"></component>//:is="zujian"就是现实的组件
</div>
</template>
<script>
import Order from './components/Order'
import Child from './components/Child.vue'
export default {
     nme:"App",
     components:{Order,Child},
     data() {
      return {
         zujian:'Order'//默认显示组件为Order组件
      }
     },
     methods: {
      change(com){
          this.zujian=com
      }
     }, 
}
</script>

异步组件

作用：减少页面首次加载组件的数量，需要使用的时候再去加载，通过一部组件能够提高页面首次加载的效率。

 components:{//按需记载，这样引入，只要在需要的时候才会加载出来
      Order:()=>import ('./components/Order'),
      Child:()=>import ('./components/Child')
      },

Mixin混入

合并

作用：多个组件共享一个配置，比如methods,data,computed等，是一个js文件，js文件中的methods,data,computed等会和用了Mixin的组件混合。
基本用法方法：

//Child.js文件

export default{
    methods: {
        showName(){
            alert(this.name)
        }
    },
}

//Order.js文件

export default{
    data() {
        return {
            haha:'你好'
        }
    },
}

//将Child.js文件，Order.js文件引入到一个总mixin 文件，命名为index.js 文件

import  ChildMixin from '../mixin/child'
import OrderMixin from '../mixin/order'
export{
    ChildMixin,
    OrderMixin
}

//在组件中使用

<template>
  <div>
    <p @click="showName" >孩子姓名{{name}}</p>//这里的showname方法来自于Child.js文件的方法
  </div>
</template>
<script>
import {ChildMixin} from '../mixin'//引入想要的mixin 文件，这里引入Child.js文件
export default {
  name:'Child',
  mixins:[ChildMixin],//新增一个mixins配置，是一个数组，里面填写引入的mixin 文件
  data() {
    return {
      name:'王'
    }
  },
}
</script>

• data、computed: 当mixin 和组件有相同的data、computed配置，则以组件的配置为主。
• 生命周期、watch:当mixin 和组件有相同的生命周期、watch配置，会合并为一个数组，因此都会被调用，混入对象的钩子将在组件钩子之前调用。
• methods:将会合并为同一个对象，如果有重名方法，则取组件的方法

全局混入

一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。会影响到所有的组件实例，依赖，第三方插件