图片懒加载

// 1.安装插件
yarn add vue-lazyload
// 2.在入口文件main.js中引入并使用
import VueLazylod from 'vue-lazyload'
// 在Vue中直接使用
Vue.use(VueLazyload)
// 3.在Vue文件中将img标签的src属性直接改为v-lazy,从而将图片显示方式改为懒加载显示
<img v-lazy="/static/img/1.png">

依赖注入(跨级通信)默认数据不响应

export default {
  // provide:提供 inject:注入 默认数据不是响应式的！！！
  //祖先级组件通过provide提供数据 子孙组件通过inject获取数据

  // 祖先级组件
   data() {
    return {
      name: 'QQ',
    }
  },

  provide() {
    return {
      name: this.name,
    }
  }



  //   子孙级组件
  inject: ['name'],
  create(){
    console.log(this.name)
  }
}

依赖注入使数据成为响应式

// 依赖注入使数据成为响应式的！！！
<template>
  <div>
    {{obj.name}}
    {{num}}
    <button @click="editAge" >+1</button>
  </div>
</template>
<script>
export default {
  //祖先级组件
  data(){
    return{
      obj:{
        name:'QQ',
        num:10
      },
      age:21
    },

    methods:{
      editAge(){
        this.num++
        this.age++
      }
    }

    provide(){
      return{
        //一种方法是用对象包裹要传的数据
        obj:this.obj
        //一种方法传递一个参数用方法返回
        age:() => this.age
      },
    }
  }
</script>


    // 子孙级组件
<template>
  <div>
    {{obj.name}}
    {{age()}}
  </div>
</template>
<script>
export default{
    inject:['obj','age'],
}
   }
</script>