Vue--API--选项

﹏ヽ暗。殇╰゛Y 2022-12-21 04:47 130阅读 0赞

原文网址：[Vue--API--选项\_IT利刃出鞘的博客-CSDN博客][Vue--API--_IT_-CSDN]

# 其他网址 #

> [API — Vue.js][API _ Vue.js]

# 选项 / 组合 #

## provide/inject ##

**其他网址**

> [Vue依赖注入：provide/inject - vue入坑总结 - 周陆军的个人网站][Vue_provide_inject - vue_ -]  
> [Vue 依赖注入 - Provide/Inject - 简书][Vue _ - Provide_Inject -]  
> [Vue的依赖注入\_Ocean\_Fine的博客-CSDN博客\_vue 依赖注入][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][http_localhost_8080_compA]
> 
> 结果
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]
> 
> 按下按钮
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1][]

## mixin ##

**其他网址**

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

**简介**

> Mixin是一种更好的复用代码的模式。java , Object C 中的 interface , implements, extends 等关键字的意义,就是为了让代码可以复用、继承。同样的，在vue中，用mixin来实现可复用。
> 
> Mixin 实际上是利用语言的特性（关键字），以更加简洁易懂的方式，实现了 “设计模式”中的 “组合模式”。 可以定义一个公共的类，这个类就叫做”mixin”。然后让其他的类，通过“include” 语言特性包含mixin, 直接具备了 mixin 所具备的各种方法、数据等。

**实例**

> **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][http_localhost_8080_compA]
> 
> ![20201207000046586.png][]

# 选项 / 其它 #

## inheritAttrs ##

**其他网址**

> [vm.$attrs 【Vue 2.4.0新增inheritAttrs，attrs详解】 - 简书][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][http_localhost_8080_compA]
> 
> 结果：父组件的属性覆盖了子组件同名的属性
> 
> ![20201114230436367.png][]
> 
> **改进**
> 
> 那如果我想要保留子组件的属性，还想要获得父组件同名类型的定义该怎么办呢？见下方
> 
> 只修改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][http_localhost_8080_compA]
> 
> 结果：父组件的属性没有覆盖子组件同名的属性
> 
> ![20201114231206114.png][]
> 
> 点击按钮：获取到父组件的同名属性
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2][]

[Vue--API--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109694534
[API _ Vue.js]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[Vue_provide_inject - vue_ -]: https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8408.html
[Vue _ - Provide_Inject -]: https://www.jianshu.com/p/6651dccd282c
[Vue_Ocean_Fine_-CSDN_vue]: https://blog.csdn.net/weixin_39932706/article/details/108362615
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/7cde071c3d5d485db4f8b5a574951bdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/592a325f42174258adbc10a2022e4111.png
[- mixin - _Vuejs _ - _ _ BookStack]: https://www.bookstack.cn/read/happy_book_vuejs/mixin.md
[- _ - _Vue.js v2.x _ - _ _ BookStack]: https://www.bookstack.cn/read/vue-v2.x/spilt.1.d5aae5a624eb8be9.md
[20201207000046586.png]: /images/20221120/d90b1c142d374a358fdecbac6406e1f2.png
[vm._attrs _Vue 2.4.0_inheritAttrs_attrs_ -]: https://www.jianshu.com/p/ce8ca875c337
[20201114230436367.png]: /images/20221120/3ca1d775b7514f7282a766b390eacfee.png
[20201114231206114.png]: /images/20221120/a6caaa6309704806a1e48300e49594fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 2]: /images/20221120/f67e7335b4b64481b738c2b87f60e554.png