淺談Vue模板的那些事兒

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

1 Vue.component('child-component', {
2 
3     template:  '<h3>我是閏土大叔</h3>'
4 
5 })

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

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

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

<div id="app">
    <child-component inline-template>
        <div>
            <h2>在父組件中定義子組件的模板</h2>
            <p>{{message}}</p>
            <p>{{msg}}</p>
        </div>
    </child-component>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('child-component',{
        data:function(){
            return {
                msg: '在子組件聲明的數據'
            }
        }
    });

    var app = new Vue({
        el:'#app',
        data:{
            message: '在父組件聲明的數據'
        }
    })
</script>

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

1 <div id="app">
 2 
 3     <div>
 4 
 5         <h2>在父組件中定義子組件的模板</h2>
 6 
 7         <p>在父組件聲明的數據</p>
 8 
 9         <p>在子組件聲明的數據</p>
10 
11     </div>
12 
13 </div>

可在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提供了另外一種定義模板的方式，在<script>標籤裏使用text/template類型，而且指定一個id，將這個id賦給template，舉個栗子：

<div id="app">
    <my-component></my-component>
    <script type="text/x-template" id="my-component">
        <div>這是組件的內容</div>
    </script>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component',{
        template:'#my-component'
    });

    var app = new Vue({
        el:'#app'
    })
</script>

這樣，在<script>標籤裏，你能夠愉快地寫html代碼了，不用考慮換行等問題。

不少剛接觸Vue開發的新手會很是喜歡這個功能，由於用它，再加上組件知識，就能夠很輕鬆地完成交互相對複雜的頁面和應用了。若是再配合一些構件工具（gulp）組織好代碼結構，開發一些中小型產品是沒有問題的。

不過Vue的初衷並非濫用它，由於它將模板和組件的其餘定義隔離了。在以後的文章裏，我會介紹如何使用webpack來編譯.vue的文件，從而優雅地解決html書寫的問題。

今天的文章就分享到這裏。

做者：閏土大叔
連接：https://segmentfault.com/a/11...來源：segmentfault著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。