vue的extends和mixins， model 和v-model，provide和inject 的使用

一时失言乱红尘 2022-12-11 15:04 241阅读 0赞

> mixins就是混入。 一个混入对象可以包含任意组件选项。 同一个生命周期，混入对象会比组件的先执行。

test.js

export const mixinsTest = { 
      methods: { 
        hello() { 
          console.log("hello");
        }
      },
      created() { 
        this.hello()
      }
    }

home.vue

<template>
      <div>home</div>
    </template>
    
    <script>
    import {  mixinsTest } from "../components/test.js";
    export default { 
      name: "Home",
      data() { 
        return { };
      },
      created() { 
        console.log("home");
      },
      mixins: [mixinsTest],
    };
    </script>

**mixins的created会先被调用,然后再执行组件的created**

![在这里插入图片描述][20201003082606425.png_pic_center]

> vue的extends和mixins类似，通过暴露一个extends对象到组件中使用。  
> extends会比mixins先执行。执行顺序：extends > mixins > 组件  
> extends只能暴露一个extends对象，暴露多个extends不会执行。

> test.js，export暴露出多个 mixins/extends 对象

export const mixinsTests = { 
      methods: { 
        hello() { 
          console.log('hello_mixins')
        }
      },
      beforeCreate() { 
        console.log('mixins的beforeCreate')
      },
      created() { 
        this.hello()
      },
    }
    
    export const mixinsTests2 = { 
      methods: { 
        hello2() { 
          console.log('hello_mixins2')
        }
      },
      created() { 
        this.hello2()
      },
    }
    
    export const extendsTets = { 
      methods: { 
        hello3() { 
          console.log('hello_extends')
        }
      },
      beforeCreate() { 
        console.log('extends的beforeCreate')
      },
      created() { 
        this.hello3()
      },
    }

home.vue

<template>
      <div class="home">
        home
      </div>
    </template>
    
    <script>
    import {  mixinsTests, mixinsTests2, extendsTets } from '../components/test.js'
    
    export default { 
      name: 'home',
      data() { 
        return { 
          
        }
      },
      beforeCreate() { 
        console.log('home的beforeCreate')
      },
      created() { 
        console.log('12111')
      },
      mixins: [mixinsTests2, mixinsTests],
      extends: extendsTets
    }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

#### model(v-model) ####

> v-model指令的本质是：  
> 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。  
> 然后当输入事件发生时，实时更新vue实例中的数据。

<input
          type="text"
          @input="handleInput($event)"
          placeholder="请输入"
          v-bind:value="message"
        />
        <p>输入的内容是: { {  message }}</p>
    
    
    data() { 
      return { 
        message: "",
      };
    },
    methods: { 
      handleInput: function (event) { 
        console.info("控制台打印event详情");
        console.info(event);
        console.info(event.toLocaleString());
        this.message = event.target.value;
      },
    },

> 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作  
> prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用  
> model 选项可以回避这些情况产生的冲突。

Vue.component('my-checkbox', { 
      model: { 
        prop: 'checked',
        event: 'change'
      },
      props: { 
        value: String,
        checked: { 
          type: Number,
          default: 0
        }
      }
    })

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<my-checkbox
      :checked="foo"
      @change="val => { foo = val }"
      value="some value">
    </my-checkbox>

#### provide和inject ####

> 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。  
> provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols  
> 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject 选项应该是：  
> 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key，或 一个对象，该对象的： from 属性是在可用的注入内容中搜索用的 key  
> 属性是降级情况下使用的 value

> 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问祖先组件的数据

父组件

<template>
      <div class="home">
        home
        <hello-world/>
      </div>
    </template>
    
    <script>
    import HelloWorld from '../components/HelloWorld'
    export default { 
      name: "home",
      components: { 
        HelloWorld
      },
      provide () { 
        return { 
          reload: this.reload
        }
      },
      methods: { 
        reload() { 
          console.log('reload')
        }
      }
    }
    </script>

子组件

<template>
      <div>
        hello world
      </div>
    </template>
    
    <script>
    export default { 
      inject: ['reload'],
      mounted() { 
        this.reload()
      }
    }
    </script>
    
    <style lang="scss" scoped>
    </style>

向子孙组件使用

父组件

<template>
      <div></div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          datas: [
            { 
              id: 1,
              label: "产品一",
            },
            { 
              id: 1,
              label: "产品二",
            },
            { 
              id: 1,
              label: "产品三",
            },
          ],
        };
      },
      provide() { 
        return { 
          datas: this.datas,
        }
      }
    }
    </script>

子组件

<template>
      <div>
        <ul>
          <li v-for="(item, index) in datas" :key="index">
            { {  item.label }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default { 
      inject: ['datas']
    }
    </script>

> 后代元素引入被注入数据datas，并在组件内循环输出  
> 实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，  
> 除了：祖先组件不需要知道哪些后代组件使用它提供的属性  
> 后代组件不需要知道被注入的属性来自哪里

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临  
![在这里插入图片描述][20201130111956262.jpg_pic_center]

[20201003082606425.png_pic_center]: /images/20221123/97bf627850c64c8882bdfc706d6f351f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ac6ca035ef2b4104bac4e305f3ac458f.png
[20201130111956262.jpg_pic_center]: /images/20221123/9bb51e5b494643588c03665db415238d.png