摘要：接觸過的童鞋都知道，組件的模板一般都是在選項內(nèi)定義的，如我是閏土大叔這個用法都是老生常談了，今天來聊聊的內(nèi)聯(lián)模板。作者閏土大叔鏈接來源著作權(quán)歸作者所有。

接觸過vue的童鞋都知道，組件的模板一般都是在template選項內(nèi)定義的，如：

1 Vue.component("child-component", {
2 
3     template:  "
我是閏土大叔
"
4 
5 })

這個用法都是老生常談了，今天來聊聊Vue的內(nèi)聯(lián)模板。看過vue文檔的同學(xué)都知道，Vue提供了一個內(nèi)聯(lián)模板的功能，在使用組件時，給組件標(biāo)簽使用inline-template特性，組件就會把它的內(nèi)容當(dāng)做模板，而不是把它當(dāng)成內(nèi)容分發(fā)，這樣做的好處是，讓模板更靈活。

介紹完內(nèi)聯(lián)模板的概念后，接下來我要分享一個我在工作中碰到的bug，關(guān)于內(nèi)聯(lián)模板，以及我debug的過程。

先來貼出案發(fā)現(xiàn)場的代碼片段：

    
        

            
在父組件中定義子組件的模板
            
{{message}}
            
{{msg}}
        
    

渲染后的理想結(jié)果本應(yīng)該是：

 1 

 2 
 3     

 4 
 5         
在父組件中定義子組件的模板
 6 
 7         
在父組件聲明的數(shù)據(jù)
 8 
 9         
在子組件聲明的數(shù)據(jù)
10 
11     
12 
13 
     

可在Chrome里顯示的DOM節(jié)點卻是這樣的：

不僅第一個P標(biāo)簽內(nèi)的插值沒有渲染出來，而且在控制臺里還報了一個錯誤：

說什么Property or method "message" is not defined on the instance but referenced during render.（屬性或方法“message”不是在實例上定義的，而是在呈現(xiàn)過程中引用的。）

這個報錯讓我一臉懵逼，我可是照著書上的代碼敲的，來來回回看了N遍，一模一樣啊。而且書內(nèi)提及 “ 在父組件中聲明的數(shù)據(jù)message和子組件中聲明的數(shù)據(jù)msg，兩個都可以渲染。”

相信很多剛接觸vue的新人童鞋都有這種體會，照著書上的代碼敲了一遍，結(jié)果運行出錯，與書上說的結(jié)果不一致。當(dāng)你仔仔細(xì)細(xì)地檢查了半天還是沒發(fā)現(xiàn)哪錯了的時候，你會不會內(nèi)心抓狂到懷疑人生？

別急，這個時候你一定要有自己的判斷，盡信書則不如無書。這句話出自于孟子，釋義是讀書時應(yīng)該加以分析，不能盲目的去相信書中所言，一定要辯證的看待問題。萬一這本書在排版的時候小編大意寫錯了呢？也有可能吧。我們對所謂的技術(shù)書籍，在尊敬作者的前提下，也要有批判精神。

其實，console控制臺里的錯誤提示信息，就給你指明了debug的方向。通讀一遍代碼，我們可以分析一下，屬性message是定義在父組件中的data選項內(nèi)的，而調(diào)用的時候是在子組件里面調(diào)用，首先在沒有任何干涉的情況下，父子組件是沒有互通有無的功能的。所以，這時候你應(yīng)該會想到，父子組件間傳遞數(shù)據(jù)用props啊！有了思路后，那就趕緊把代碼敲起來吧：

運行一遍后，果然如你所愿，第一個P標(biāo)簽里的插值順利地渲染出來了。

除了內(nèi)聯(lián)模板，Vue還提供了另一種效率比較高的定義模板的方式，就是x-template。如果你之前沒有使用過webpack、gulp等構(gòu)件工具，試想下你的組件template的內(nèi)容很冗長很復(fù)雜，如果都在javascript里拼接字符串，效率是很低的，因為不能像寫html那么舒服（除非你用ES6里面的模板字符串）。

Vue提供了另一種定義模板的方式，在