vue进阶实战 vue进阶课程 vue进阶

每个章节都有对接的文章链接

1. $refs，$parent，$children

基础使用：参考vue官方文档

$refs

父组件调用子组件的方法或属性

$parent

子组件调用父组件的方法或属性

$children

父组件调用子组件的方法或属性

文章链接

实战案例

2. provide inject跨多组件通讯

ref和$parent / $children` 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 这样的解决方案，不得不引入三方库来支持。本节课则介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。

基础使用：参考vue官方文档

实战案例

案例一：form表单验证实现

案例二：实现状态管理

app.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
	provide () {
      return {
        app: this
      }
    }
  }
</script>

我们把 app.vue 理解为一个最外层的根组件，用来存储所有需要的全局数据和状态，甚至是计算属性（computed）、方法（methods）等。因为你的项目中所有的组件（包含路由），它的父组件（或根组件）都是 app.vue，所以我们把整个 app.vue 实例通过 provide 对外提供。

接下来，任何组件（或路由）只要通过 inject 注入 app.vue 的 app 的话，都可以直接通过 this.app.xxx 来访问 app.vue 的 data、computed、methods 等内容。

app.vue 是整个项目第一个被渲染的组件，而且只会渲染一次（即使切换路由，app.vue 也不会被再次渲染），利用这个特性，很适合做一次性全局的状态数据管理

3. $on 与 $emit

基础使用：参考vue官方文档

实战案例

局部：监听通讯（只能当前组件使用）

this.$on('ftest',(e)=>{
    console.log(e);
})

this.$emit('childtest','父组件点击了')

全局：监听通讯

//app.vue
provide(){
  	return {
  		app:this
  	}
  },
//组件
inject:['app'],
mounted(){
    this.app.$on('childtest',(e)=>{
        console.log('-----------子组件接收-----------')
        console.log(e);
    })
},
    methods:{
        event(){
            console.log('2222')
            this.app.$emit('ftest','子组件点击了')
        }
    }

常用于父组件下有多个子组件，数量未知情况，随时通知任何组件

父组件

provide(){
    return {
        $_self:this
    }
},
methods:{
    event(){
        this.$emit('childtest','$_self父组件点击了')
    }
}

子组件

inject:['$_self'],
mounted(){
    this.$_self.$on('childtest',(e)=>{
        console.log('-----------$_self子组件接收-----------')
        console.log(e);
    })
},

4. extend 与手动挂载$mount

基础使用：参考vue官方文档

实战案例

开发一个loading插件

5. 自定义组件v-model

基础使用：参考vue官方文档

实战案例

自定义组件实现v-model

6. 自定义指令实战

基础使用：参考vue官方文档

实战案例

实现骨架屏

7. v-slot

基础使用：参考vue官方文档

实战案例

v-slot封装table组件

9. nextTick

基础使用：参考vue官方文档

应用场景

1、如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过$nextTick()来完成。

created(){
    this.$nextTick(()=>{
        this.$refs.myP.innerText = "我是一只小小小小鸟，想要飞，却怎么样也飞不高！";
    });
}

注：在created()钩子函数中进行的DOM操作，不使用$nextTick()会报错：

//  Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
    this.$refs.myP.innerText = "我是一只小小小小鸟，想要飞，却怎么样也飞不高！";
}

2、更新数据后，想要使用js对新的视图进行操作时。示例（略）

3、在使用某些第三方插件时 ，这些插件需要dom动态变化后重新应用该插件，这时候就需要使用$nextTick()来重新应用插件的方法。示例（略）

实战案例

10. .sync

基础使用：参考vue官方文档

实战案例

11. Mixins

基础使用：参考vue官方文档

全局调用 main.js

import mixin from 'mixins/mixin';
Vue.mixin(mixin)

局部使用

实战案例

分页调用（当前页面data配置指定参数，mixin文件中通过this.获取参数，实现简单配置就可以）

8. Render

基础使用：参考vue官方文档

实战案例