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

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

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

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

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

先來貼出案發現場的代碼片段：

    
        

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

渲染后的理想結果本應該是：

 1 

 2 
 3     

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

可在Chrome里顯示的DOM節點卻是這樣的：

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

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

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

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

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

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

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

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

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