Vue引入组件

如何引入组件？

以以下代码为例：

<template>
  <div>
    <router-link to="/money">记帐</router-link>
    |
    <router-link to="/labels">标签</router-link>
    |
    <router-link to="/statistics">统计</router-link>
  </div>
</template>

方法一：在App.vue里直接使用(全局)

如：

<template>
  <div id="app">
    <router-view/>
     <div>
        <router-link to="/money">记帐</router-link>
            |
           <router-link to="/labels">标签</router-link>
               |
           <router-link to="/statistics">统计</router-link>
         </div>
  </div>
</template>

优点：可以在所有的页面渲染该组件。
缺点：不能控制部分页面隐藏该组件。

方法二：在各各页面引入组件

先在components创建Nav.vue组件，代码如下。

<template>
  <div>
    <router-link to="/money">记帐</router-link>
    |
    <router-link to="/labels">标签</router-link>
    |
    <router-link to="/statistics">统计</router-link>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'Nav'
  };
</script>
<style lang="scss" scoped>
</style>

然后在想要添加的页面的代码里引入组件即可。比如我想在Money.vue文件里引入：

<template>
  <div>
    Money.vue
    <hr>
    <Nav/>
  </div>
</template>
<script lang="ts">
  import Nav from '@/components/Nav.vue';
  export default {
    name: 'money',
    components: {Nav}
  };
</script>
<style lang="scss" scoped>
</style>

其他想引入该组件可以重复以上步骤。

优点：可以控制一些页面不需要引用该组件。
缺点：一直重复。。。。

方法三：方法二的改进版

不在各各页面引入组件，而是在管理全局的main.ts文件里引入！

同样先创建Nav.vue组件，然后在main.ts引入文件：

import Vue from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
import Nav from '@/components/Nav.vue';    //添加了这行代码
Vue.config.productionTip = false;
Vue.component('Nav',Nav);    //添加了这行代码
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

最后只需要在需要引入该组件的页面添加 <Nav/> 即可！

优点：可以选择页面是否引入组件。
缺点：暂时没有

插槽

如果需要在页面传送信息给组件该怎么实现？如下代码，有Money.vue、Statistics.vue、Labels.vue这三个页面，每个文件与以下代码除了 .content 里的信息不同，HTML与CSS完全一样，那么就需要封装成组件提供使用。

//Money.vue
<template>
  <div class="nav-wrapper">
    <div class="content">
      Money.vue        
    </div>
    <Nav/>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'money',
  };
</script>
<style lang="scss" scoped>
  .nav-wrapper {
    border: 1px solid green;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .content {
    border: 1px solid blue;
    overflow: auto;
    flex-grow: 1;
  }
</style>

封装成：

<template>
  <div class="nav-wrapper">
    <div class="content">
      ????  //如何实现不一样？
    </div>
    <Nav/>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'Layout'
  }
</script>
<style lang="scss" scoped>
  .nav-wrapper {
    border: 1px solid green;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .content {
    border: 1px solid blue;
    overflow: auto;
    flex-grow: 1;
  }
</style>

但问题来了，class名为 content 里的内容是不同，那么这里每个页面都不能一样，该怎么做？

这个问题Vue官方提供了一种办法，名为“插槽”。

只需要在组件里需要不一样的地方添 <slot/> ，在页面里引入组件的同时，把信息写进组件里，组件会在渲染的过程中把信息传递给组件，如下：

//Layout.vue组件
<template>
  <div class="nav-wrapper">
    <div class="content">
      <slot/>
    </div>
    <Nav/>
  </div>
</template>
<script lang="ts">
    //忽略
</script>
<style lang="scss" scoped>
    //忽略
</style>

页面如下：

<template>
    <Layout>
      Money.vue
    </Layout>
</template>
<script lang="ts">
  export default {
    name: 'money',
  };
</script>
<style lang="scss" scoped>
</style>

如何引入一个目录下的所有文件？

假如一个文件下全是icon，要引入某个文件的话难道需要一个一个用 import 引入？这个过程一直重复，可以考虑直接引入整个文件。代码如下：

<script lang="ts">
  const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {
    importAll(require.context('路径', true,/\.svg$/));
  } catch(error){
    console.log(error);
  }
 ...
</script>