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

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

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

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

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

先來(lái)貼出案發(fā)現(xiàn)場(chǎng)的代碼片段：

    
        

            
在父組件中定義子組件的模板
            
{{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é)點(diǎn)卻是這樣的：

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

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

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

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

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

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

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

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

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