一天一个知识点

一、Vue中slot的使用

父组件
<template>
  <div class="home" @click="goPage()">首页
    <test>
      <template slot="bottom" slot-scope="data">
        bottombottombottombottom==「」「」{{data.bottom}}
      </template>
      <template slot-scope="data" slot="top">
        top topop topop topop topop topop top
      </template>
    </test>
  </div>
</template>


子组件


<template>
  <div>
    <slot name="bottom" :bottom="bottom">默认值</slot>
    <div style="width:200px;height: 200px; background-color: blueviolet;">
      我是子组件的值
    </div>
    <slot name="top">默认值</slot>
  </div>
</template>

 使用场景
1.通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

2.如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

3.通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用比如布局组件、表格列、下拉选、弹框显示内容等

slot可以分来以下三种：

• 默认插槽（就是父组件没值的时候可以在子组件设置插槽的默认值）

• 具名插槽（子组件用name属性来表示插槽的名字，父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值）

• 作用域插槽（作用域插槽是子组件可以在slot标签上绑定属性值，在父组件可以拿到子组件的数据，通过子组件绑定数据传递给父组件。（插槽的作用域为子组件））

使用过element就可以发现slot的应用

二、Vue 中mixin 的理解

1.组件内使用mixin

//mixin.js文件
export default {
    data(){
        return {
            name: 'mixin'
        }
    },
    created: function(){
        this.hellomixin()
    },
    methods: {
        hellomixin(){
            console.log('hello mixin!');
        }
    }
}

<script>
import mixin from '@/views/common/mixin'
export default {
  mixins: [mixin]
}
</script>

 2.main全局混入

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，mixin混入')
    }
  }
})

mixin的知识点

1.多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

2.混合为同一个对象数据时候，两个对象键名冲突时，取组件对象的键值

3.混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。