mixins使用混入引入组件，并可以使用公共函数。组件类同名函数可以替代公共函数。使用$ref获得子元素数据和元素dom节点。使用$parents获得父元素数据。slot插槽的使用

父组件：

<template>
    <div class="box">
        <Header >
            <div slot="left">你好</div>
            <div slot="right" @click="userFn">你好</div>
        </Header>
        <div class="content">
            <h1 ref="title" id="title">标题</h1>
            <p ref="desc" id="desc">段落描述</p>
            <button @click="getDOM">获取DOM节点</button>
            <Reftest ref="test"/>
            <button @click="getData">获取子元素数据</button>
        </div>
    </div>
</template>
<script>
  import Header from '@/mixins/header'
  import Reftest from '@/mixins/header'
  export default {
    mixins:[Header,Reftest],
    data(){
      return {
        message:'父组件'
      }
    },
    methods: {
      getDOM () {
        console.log(document.getElementById('title'))
        console.log(document.getElementById('desc'))
        console.log('----------------------')
        console.log(this.$refs.title)
        console.log(this.$refs.desc)
      },
      getData(){
        this.$refs.test.msg='奶牛'
        console.log(this.$refs.test.msg)
      },

    }
  }
</script>

子组件

<template>
  <header class="header">
    <ul>
      <li>
        <slot name="left">左</slot>
      </li>
      <li>
        <slot>中</slot>
      </li>
      <li>
        <slot name="right">右</slot>
      </li>
    </ul>
  </header>
</template>

<style lang="scss">
.header {
  width: 100%;
  height: 44px;
  background-color: #f66;
  margin-bottom: 10px;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    li{
      width: auto;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &:nth-child(1) {
         50px;
      }
      &:nth-child(2) {
        flex: 1;
      }
      &:nth-child(3) {
        width: 50px;
      }
    }
  }
}
</style>

<template>
  <div>
    <button @click="getData">子组件直接获取父组件的数据</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'child-----------------------------'
    }
  },
  methods: {
    getData () {
      console.log(this.$parent.message)
    }
  }
}
</script>

Header.js

import Header from '@/components/Header'
import Reftest from '@/components/Reftest'
export default {
  components: {
    Header,
    Reftest
  },
  methods: {
    userFn () {
      console.log('个人中心')
    }
  }
}