Vue.js render方法使用詳解
前注:
版本限制:
Vue.js 2.0+
1.0無法使用
沒耐心,只關心有什么用的,想知道其大概是獲取什么東西后生成的,可以直接看結尾的總結
非使用render方法的情況
完整代碼:
<!DOCTYPE html> <html> <head> <title>Vue的render方法說明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child :level="1">Hello world!</child> </div> <script type="text/x-template" id="template"> <div> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6> </div> </script> <script type="text/javascript"> Vue.component('child', { template: '#template', props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
代碼說明:
- 最下面的new Vue方法很明顯,是new了一個Vue的實例,掛載點是”#app”這個dom
- Vue.component這部分代碼,第一個參數(shù)表示注冊了一個Vue的組件,標簽名是child(即 <child> 標簽會被替換);
- 第二個參數(shù)中,template屬性表示取找id=“template”的標簽(另注,這個標簽是script,或者是div,或者是template,或者是其他,沒有影響),然后將這個標簽作為組件的模板
- props表示傳遞給這個組件的變量,通過標簽中的v-bind:level這種形式傳遞變量level的值等于1。在這里的寫法是限制變量類型為number,并且強制需要
- slot表示內容分發(fā),具體來說,就是把組件替換的源html標簽里的內容(如 <child> 標簽里面的內容,不包含 <child> 標簽本身,這里是Hello world!),發(fā)在 <slot> 標簽所在的位置(即放在 <h1>``````<h2> 這樣的標簽內)。
- 如果還不理解,可以運行該段代碼查看結果,或者去看vue的官方文檔說明
- 總的來說,順序如下:注冊一個組件,這個組件有模板,這個模板里有一個變量,變量的值通過父組件來傳遞,然后根據變量的值,通過v-if命令顯示對應的html標簽內容,然后在父組件里使用這個組件,讓子組件顯示需要顯示的內容。
這樣的代碼有一個缺陷,就是需要寫大量重復的代碼,如從 <h1> ~ <h6> 共6種情況。如果這樣的模板比較復雜,比如 <hx> 標簽里還有很多其他內容,顯然會讓人十分困擾,既不美觀也不好用。
使用render方法的情況
解決辦法就是render方法,全部代碼如下:
<!DOCTYPE html> <html> <head> <title>Vue的render方法說明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child v-bind:level="2">Hello world!</child> </div> <script type="text/javascript"> Vue.component('child', { render: function (createElement) { return createElement( 'h' + this.level, // tag name 標簽名稱 this.$slots.default // 子組件中的陣列 ) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
代碼說明:
1、這里的代碼和上面區(qū)別之處有兩點:
其一,沒有顯式的模板內容,而是通過render方法生成;
其二,使用了createElement方法
2、關于createElement方法,他是通過render函數(shù)的參數(shù)傳遞進來的,這個方法有三個參數(shù),
第一個參數(shù)主要用于提供dom的html內容,類型可以是字符串、對象或函數(shù)。比如”div”就是創(chuàng)建一個 <div>標簽
第二個參數(shù)(類型是對象)主要用于設置這個dom的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類,具體可以參考 官方文檔 里這一小節(jié)的說明
第三個參數(shù)(類型是數(shù)組,數(shù)組元素類型是VNode)主要用于說是該結點下有其他結點的話,就放在這里。
比如說,有需要分發(fā)的標簽 <slot>,則通過 this.$slots.default 來獲得,或許還有其他組件之類,可能需要被使用的,應該也是放在這里。
個人初步理解是,在原本被替換的地方,例如例上面代碼中的 <child> 標簽,在其下的每個次一級標簽為一個元素,放在 this.$slots.default這個數(shù)組中,例如上面的話,這個數(shù)組只有一個元素,但是以下代碼:
<child v-bind:level="2"><div>Hello</div><div> world!</div></child>
這個數(shù)組中則有兩個元素,分別是 <div>Hello</div> 和 <div> world!</div>,例如 this.$slots.default[0] 則表示第一個標簽。
另外,假如這2個元素中間有空格、換行符之類,那么數(shù)組中則有三個元素,那個空格、換行符則為第二個元素。這個屬性有點類似dom的 childNodes屬性,不是單純以標簽才算作子節(jié)點的。(但注意,不是完全相同)
有時候,我們可能想在里面添加其他的組件,例如將abc組件注冊在里面。那么,我們首先要注冊這個abc組件,然后將abc組件在數(shù)組里通過createElement來創(chuàng)建標簽,只有通過這樣的方式創(chuàng)建的abc標簽,才能被abc組件使用。單純輸入字符串 "<abc></abc>" 這樣是不可以的。
如以下代碼是可行的:(在通過render方法生成的模板中添加別的組件)
<!DOCTYPE html> <html> <head> <title>Vue的render方法說明</title> <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> </head> <body> <div id="app"> <child v-bind:level="2"> <div>Hello</div><div> world!</div> </child> </div> <script> Vue.component('abc', { template: "<div>abc</div>" }) Vue.component('child', { render: function (createElement) { console.log(this.$slots) return createElement( 'h' + this.level, // tag name 標簽名稱 [this.$slots.default[0], createElement("abc"), this.$slots.default[1]] // 子組件中的陣列 ) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
顯示結果是:
Hello
abc
world!
最后,如果想將原有內容全部使用(而不是只取部分標簽),那么直接使用 this.$slots.default 作為第三個參數(shù)即可,他本身就是一個數(shù)組。
3、總而言之,createElement方法的作用就是動態(tài)的創(chuàng)建一個dom用于被render函數(shù)渲染,其中參數(shù)二和參數(shù)三可以選擇性省略,參數(shù)二用于設置dom的樣式、屬性、事件等,參數(shù)三用于設置分發(fā)的內容,包括新增的其他組件。
粗略理解的話,可以理解為:createElement( 標簽名, 標簽屬性, 標簽里的內容)
這樣的話,我們就有了一個組件的模板所需要的全部內容了
總結
1、render方法的實質就是生成template模板;
2、通過調用一個方法來生成,而這個方法是通過render方法的參數(shù)傳遞給他的;
3、這個方法有三個參數(shù),分別提供標簽名,標簽相關屬性,標簽內部的html內容
4、通過這三個參數(shù),可以生活曾一個完整的模板。
備注:
1、render方法可以使用JSX語法,但需要Babel plugin插件;
2、render方法里的第三個參數(shù)可以使用函數(shù)來生成多個組件(特別是如果他們相同的話),只要生成結果是一個數(shù)組,且數(shù)組元素都是VNode即可
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
利用vue+elementUI實現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關于利用vue+elementUI實現(xiàn)部分引入組件的相關資料,以及介紹了vue引入elementUI報錯的解決方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。2017-11-11vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
這篇文章主要介紹了vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下2018-11-11