原文网址：

简介

说明

        本文用示例说明Vue的选项的用法。包括：组合选项和其他选项。

        组合选项将介绍：mixin，provide/inject；其他选项将介绍：inheritAttrs。

官网

API — Vue.js

选项 / 组合

mixin

简介

        Mixin是一种更好的复用代码的模式。java , Object C 中的 interface , implements, extends 等关键字的意义,就是为了让代码可以复用、继承。同样的，在vue中，用mixin来实现可复用。

        Mixin 实际上是利用语言的特性（关键字），以更加简洁易懂的方式，实现了 “设计模式”中的 “组合模式”。 可以定义一个公共的类，这个类就叫做”mixin”。然后让其他的类，通过“include” 语言特性包含mixin, 直接具备了 mixin 所具备的各种方法、数据等。

官网

混入 — Vue.js

实例

src/mixins/SayHello.js

export default {data() {return {mixinName: "SayHello.js"}},methods: {sayHello(name){return "hello," + name;}}
}

src/components/CompA.vue

<template><div class="compA"><p>{{ mixinName + ": " + sayHello(name) }}</p></div>
</template><script>
import SayHello from "@/mixins/SayHello";export default {mixins: [SayHello],data() {return {name: 'Tony'}}
}
</script><style scoped>
</style>

 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";Vue.use(Router)export default new Router({routes: [{path: '/compA',name: 'compA',component: CompA}]
})

测试

访问：http://localhost:8080/#/compA

provide/inject

其他网址

Vue依赖注入：provide/inject - vue入坑总结 - 周陆军的个人网站
Vue 依赖注入 - Provide/Inject - 简书
Vue的依赖注入_Ocean_Fine的博客-CSDN博客_vue 依赖注入

简介

$parent属性可以让子组件访问父组件，但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据，其用法与props完全相同。

provide和inject数据不是响应的，改变的provide的数据，不会响应到inject注入的值；如果传入一个可监听的对象，那么其对象的属性还是可响应的。

provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props

• provide: 它是一个对象, 或者是一个返回对象的函数。里面它可以包含所有要传递给子孙组件的属性或属性值，使用对象模式的时候注意this的指向问题。
• inject: 它可以是一个字符串数组或者是一个对象。属性值也可以是一个对象。

缺点与限制 

        provide 和 inject 主要是为高阶插件/组件库提供用例, 官方不推荐在应用程序代码中使用，理由很直接：他怕你"管不好"

      设计项目，通常追求有清晰的数据流向和合理的组件层级关系便于调试和维护，然而这对选项支持任意层级都能访问，导致数据追踪比较困难。不知道那一层级声明了provide又或是哪些层级使用了inject。造成比较大的维护成本。因此，除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。。

实例

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";Vue.use(Router)export default new Router({routes: [{path: '/compA',name: 'compA',component: CompA}]
})

components/CompA.vue

<template><div class="compA"><p>CompA</p><hr><comp-b></comp-b></div>
</template><script>
import CompB from "@/components/CompB";export default {components: {CompB},data() {return {firstName: "Tony",}},methods: {method1(){alert("this is method1")}},provide(){return {data1: this.firstName,method1: this.method1}}
}
</script><style scoped></style>

components/CompB.vue

<template><div class="compB"><p>CompB</p><hr><comp-c></comp-c></div>
</template><script>
import CompC from "@/components/CompC";
export default {components: {CompC}
}
</script><style scoped></style>

 components/CompC.vue

<template><div class="compC"><p>CompC</p><p>{{this.data1}}</p><button @click="this.method1">here</button></div>
</template><script>
export default {inject:['data1', 'method1']
}
</script><style scoped></style>

测试

访问：http://localhost:8080/#/compA

结果

按下按钮

选项 / 其它

inheritAttrs

其他网址

vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】 - 简书

简介

官网原话：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

实例

components/CompA.vue 

<template><div id="compA"><comp-b type="checkbox"></comp-b></div>
</template>
<script>
import CompB from "@/components/CompB";export default {components: {CompB},
};
</script>

components/CompB.vue

<template><input type="button" value="abc">
</template>
<script>
export default {
};
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";Vue.use(Router)
Vue.use(VueAxios, Axios);export default new Router({routes: [{path: '/compA',name: '/compA',component: CompA}]
})

测试

访问：http://localhost:8080/#/compA

结果：父组件的属性覆盖了子组件同名的属性

改进

那如果我想要保留子组件的属性，还想要获得父组件同名类型的定义该怎么办呢？见下方

只修改components/compB.vue

<template><input type="button" value="abc" @click="showAttr">
</template>
<script>
export default {inheritAttrs: false,methods:{showAttr() {alert(this.$attrs.type)}}
};
</script>

测试

访问：http://localhost:8080/#/compA

结果：父组件的属性没有覆盖子组件同名的属性

点击按钮：获取到父组件的同名属性

其他网址

进阶知识 - mixin - 《Vuejs 中文教程》 - 书栈网 · BookStack
混入 - 基础 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack