Vue的API使用 2021-08-26

Mixins

官方说法

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。当mixin的数据对象和组件的数据发生冲突时以组件数据优先mixin的失效。当函数相同时也是执行组件里面的而mixin的失效

感悟

mixin的使用是在一个js文件上定义从而可以重复利用。

例子

定义了一个按钮每次点击它就会加一，上面显示的数字和点击函数都是通过MyMxin引来的以及created里面的log。

//这是定义的MyMixin.js
export var MyMixin={
    data(){
        return{
            num:0
        }        
    },
    methods:{
        adds(){
            this.num++
        }
    },
    created(){
        console.log(1);
    }
}

//这是vue的主页面用来显示的
<template>
  <div class="app">
    {{num}}
    <div class="add" @click="adds"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {MyMixin} from './MyMixin';
export default defineComponent({
  name: "App",
  components: {
  },
  created(){
    console.log(2);
    
  },
  mixins:[
    MyMixin
  ]
});
</script>
<style scoped>
.add{
  width: 50px;
  height: 50px;
  background: red;
}
</style>

provide和inject

• 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。这对使用可以进行父传后辈但是不是响应的要做相应的就需要用computed来监听。
• 当不用响应式的时候只要父辈用provide传值子辈用inject接受就好了。
• 当要用响应式布局就需要传递一个箭头函数来传值，在子辈上用computed监听这个传来的值进行响应式的操作。
  父辈

<template>
    <div>
        我是爸爸: <input v-model="data1" type="text">
        <Son>
    </div>
</template>
<script>
import Son from './AppSon.vue'
export default {
    name : 'Father',
    components:{
        Son
    },
    data(){
        return{
            data1:11
        }
    },
    provide(){
        return{
            gogo:()=> this.data1
        }
    }
}
</script>

子辈

<template>
    <div>我是儿子:{{datass}}</div>

</template>
<script>
export default {
    name:'Son',
    inject:['gogo'],
    computed:{
        datass(){
            return this.gogo()
        }
    }
}
</script>

vue的组件内嵌套组件执行顺序

当父组件执行到beforemount的时候加载子组件直到子组件加载完mounted在加载父组件的后续。