2_DS_20220904

mixin

• 当多个组件使用相同的配置项(数据,方法等)可提取简化代码,复用

• 使用方式 :

  0. 定义混合 :

     在src文件夹下新建一个mixins文件夹

     export default myMixins = {
         data(){
             ...
         },
         methods:{
             ...
         }
     }
     

  1. 使用混合 :

     • 局部混合:mixins:['xxx']
     • 全局混合: Vue.mixin(xxx) 尽量不使用

• 代码冲突

  • 与生命钩子函数冲突

    先执行mixins中的生命钩子函数,再执行组件中的生命周期钩子函数

  • 与data()或者methods()冲突

    以组件中的为主

vue编程的流程

0. 实现静态组件: 抽取组件,使用组件实现页面静态效果

1. 展示动态数据:

   2.1 数据的类型,名称是什么?

   2.2 数据保存在哪个组件?

2. 交互 --- 从绑定事件监听开始