說明：不知道是語法糖的問題還是腳手架的編譯限制，在vue的webpack項(xiàng)目上使用單文件組件特別麻煩，一般的開發(fā)者只會(huì)接觸通過Vue.components()靜態(tài)方法來構(gòu)建簡單的組件，但是隨著業(yè)務(wù)邏輯復(fù)雜化，單文件組件逐漸對(duì)代碼整體解耦實(shí)現(xiàn)了很大的幫助，現(xiàn)在不得已用一篇文章詳解單文件組件相關(guān)問題以及用法。

1、從webpack項(xiàng)目目錄結(jié)構(gòu)來解釋什么是單文件組件

vue的webpack項(xiàng)目簡單的源碼結(jié)構(gòu).png

vue 的webpack的結(jié)構(gòu)非常簡單，簡單的一眼就可以知道每個(gè)目錄下是干啥的，在components目錄下就有屬于我們想要詳細(xì)解析的內(nèi)容，這兩個(gè)vue文件即為單文件組件。

2、使用單文件組件實(shí)現(xiàn)簡單的組件使用

一般很多博客都用vue-loader來做文件組件的注入或者直接通過import指令導(dǎo)入對(duì)應(yīng)的組件，但是他們寫法相對(duì)非常復(fù)雜，各種配置，而且整體性欠缺，特別是在正式版本上可能因配置問題而造成使用失效。這個(gè)時(shí)候需要我們common.js寫法出場了，雖然它只是一個(gè)過渡者，但是整體代碼簡潔，思想非常好。

2.1、注冊(cè)聲明：

   <!-- BaseView.vue -->
  <script>
    export default{
        components:{
              yourselfTag:require('./YourselfTag.vue').default
        }
    }
  </script>

2.2、父組件使用：

    <!-- BaseView.vue -->
  <template>
      <div>
              <yourself-tag></yourself-tag>
      </div>
  </template>

通過以上簡短的方式，我們完成了單文件組件簡單的使用。

3、標(biāo)簽化賦值利用props

在很多情況下我們需要對(duì)標(biāo)簽內(nèi)部的變量賦值，這個(gè)時(shí)候該怎么弄呢，在這里我也是仔細(xì)翻閱了官方文檔，最后還是在源碼中找到了答案：

點(diǎn)擊comments進(jìn)入的源碼.png

根據(jù)源碼發(fā)現(xiàn)最終調(diào)用的.default對(duì)應(yīng)的就是這個(gè)方法，在這個(gè)方法中我們發(fā)現(xiàn)無論那種渲染都會(huì)啟用.vue單文件組件下的props作為參數(shù)來渲染對(duì)應(yīng)的單文件組件內(nèi)部的內(nèi)容。那么我們只用聲明props來進(jìn)行標(biāo)簽上傳遞值就行了。
賦值代碼：
3.1、單文件組件內(nèi)部聲明props

    <!-- YourselfTag.vue -->
  <script>
    export default{
        props:['yourAttribute']
    }
  </script>

3.2、父組件上嵌入標(biāo)簽

   <!-- BaseView.vue -->
  <template>
      <div>
          <yourself-tag yourAttribute="vue"></yourself-tag>
      </div>
  </template>

3.3、子組件使用此聲明屬性

     <!-- YourselfTag.vue -->
   <template>
      <div>
            <p>{{yourAttribute}}</p>
      </div>
   </template>

結(jié)果顯示為 vue

4、標(biāo)簽化初始化url問題

結(jié)合第三點(diǎn)所講的如果在自組件中這樣寫會(huì)遇到一些情況

    <!-- YourselfTag.vue -->
   <template>
      <div>
            <img :src="yourAttribute" >
      </div>
   </template>

此種寫法會(huì)造成圖片顯示不了的狀況

4.1、發(fā)生原因

通過瀏覽器運(yùn)行，會(huì)從debug中得到當(dāng)前下的element的值：
<img src="../assets/xxx.png"
但是默認(rèn)情況下直接使用此標(biāo)簽，vue的編譯器會(huì)將其編譯成如下標(biāo)簽:
<img src="xxxxxxxxxxxxxxxxxxxx" base64的解析地址。

于是我們明白了，其直接導(dǎo)入進(jìn)來，vue在watch視圖加載的時(shí)候沒有進(jìn)行對(duì)src進(jìn)行編譯，而是直接使用其導(dǎo)入的值的，調(diào)過了編譯一環(huán)，咋辦呢？

4.2、解決方法--插值器使用
slot這個(gè)為vue的插值器，可以將標(biāo)簽動(dòng)態(tài)插入給對(duì)應(yīng)的組件，于是我們這樣寫，在主組件下：

  <!-- YourselfTag.vue -->
  <template>
      <div>
           <slot name = "image"></slot>
      </div>
  </template>
------------------------------------------------------
  <!-- BaseView.vue -->
  <template>
      <div>
          <yourself-tag>
              <img src="../assets/xxx.png" slot="image">
          </yourself-tag>
      </div>
  </template>

通過這樣的插值器，我們可以動(dòng)態(tài)設(shè)置這img上的所有屬性來完成不同種變化。