Vue2.6实现去哪儿网 --复用组件、组件内容

一、复用组件

组件复用的第一种方式是在全局注册

// 组件的命名可以是首字母大写或者像下面这样用 - 来放在单词之间
// 这样我们可以用 <> 包裹组件名的方式使用组件
// vue 官方强烈推荐使用 <> 包裹的全字母小写，并且使用连字符连接的使用方式，例如 <home-header>
Vue.component('my-component-name', {
  // ... 选项 ...
})

但是在全局注册有个缺点就是即使我们不使用这个组件，它仍然会包含在最终的构建结果中，造成了用户下载的 Javascript 的无谓增加，所以我们会希望通过 components 属性定义私有的组件。

一个普通的 vue 单文件包含 template、script、style 三大部分

在 script 中通过 export default 导出，然后我们就可以通过 import { componentname } from '路径' 的形式导入组件，接着在 components 属性中接收，最后就可以在 template 中通过组件名来使用组件

// 子组件 Header.vue
<template>
  <div>我是页面的头部</div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped></style>


// 父组件 Home.vue
<template>
  <home-header></home-headeer>
</template>

<script>
import HomeHeader from './components/Header.vue'
export default {
  name: 'HomeHeader',
  components: {
    HomeHeader
  }
}
</script>

<style lang="stylus" scoped></style>

二、复用组件内容

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。

mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 混合对象可以包含任意组件选项。 当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

// mixin.js     mixin 是一个对象，里面可以定义所有的 Vue 组件的属性
export const showMixin = {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = show
    }
  },
  created() {
    console.log(" hi I'm from minin ")
  }
}

//component a
import { showMixin } from '../Mixin/mixin.js'
export default {
    name: 'a',
    mixins: [ showMixin ]，
    data： {
        return {
            show: 'test'
        )
    }
}

当一个组件使用了 mixins ，那么定义的 mixin 会合并到这个组件中，如果这个组件里定义了相同的属性，则会覆盖掉 mixin 里定义的数据，有点类似于“类继承”中子类继承父类。例如上面的例子中，a 组件定义了 show 的值，那么 show 的值会覆盖掉 mixin 中的 show 的值。

这是通过引入的方式使用 mixins ，也可以通过全局定义的方式使用 mixins

我们可以在 main.js 中

// main.js
import Vue from 'vue'
import App from './App.vue'

// 全局 Mixins
Vue.mixin({
    created:() {
        const myOption = this.$options.myOption;
        if( myOption ) {
            console.log( myOption );
        }
    }
})
new Vue({
    render: (h) => h(App),
    myOption: 'test-test-test'
}).$mount('#app');

这样我们在每个组件创建的时候，都会去打印出 myOption 的值