Vue依赖注入学习

父组件使用provide方法，返回要注入的data数据或方法

provide() {
    return {
        // 各个子组件，孙子组件依赖的关系，可以是方法，也可以是data数据
        scrollTop: this.scrollTop,
        back: this.back
    }
}

// 父组件
export default {
    components: { types, access, exportation, complete },
    name: '/task/checkin',
    // data：任务详情
    props: {
        data: { type: Object, default: {} }
    },
    mixins: [Mixins],
    data() {
        return {
            // 步骤条
            active: 1,
            // 接入源输出源表单控制
            form: {
            }
        }
    },
        // 关键部分
    provide() {
        return {
            scrollTop: this.scrollTop,
            back: this.back
        }
    },
    methods: {
        // 完成创建，清空form
        back() {
        },
        next(val) {
            this.active = val
        },
        // 页面向上滚动
        scrollTop(val = 160) {
            this.$refs.checkin.scrollTop = val
        }
    },
    created() {
    }
}

子组件或者孙子组件等，使用inject来接收

export default {
    props: ['active', 'data', 'loading'],
    inject: ['scrollTop', 'back', 'checkActive', 'form'],
    name: 'checkin-complete',
    mixins: [Mixins],
    components: { checkinMap },
    data() {
        return {
            activeNames: ['1', '2']
        }
    },
    methods: {
        next(val) {
            // Object类型，是老的原始数据，不是最新的ajax赋值的数据
            console.log(this.form)
            // 在注入的子页面，修改属性值是可以改变所有引入的，但是在父组件修改数据，子组件并不会被更新，还是需要用bind绑定
            this.form.jobName = 1238912
            // 直接执行
            this.scrollTop()
            // 单一数据checkActive：1，也不是最新的数据，通过其他方式改表也不会被改变
            this.checkActive = 2
            // 重新赋值也是只对当前模块有效
            console.log(this.checkActive)
            this.$emit('update:active', val)
        }
    }
}