溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前注：
版本限制：
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>
<h2 v-if="level === 1">
<slot></slot>
</h2>
<h3 v-if="level === 2">
<slot></slot>
</h3>
<h4 v-if="level === 3">
<slot></slot>
</h4>
<h5 v-if="level === 4">
<slot></slot>
</h5>
<h6 v-if="level === 5">
<slot></slot>
</h6>
<h7 v-if="level === 6">
<slot></slot>
</h7>
</div>
</script>
<script type="text/javascript">
Vue.component('child', {
template: '#template',
props: {
level: {
type: Number,
required: true
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
代碼說明：
這樣的代碼有一個缺陷，就是需要寫大量重復的代碼，如從 <h2> ～ <h7> 共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、這里的代碼和上面區別之處有兩點：
其一，沒有顯式的模板內容，而是通過render方法生成；
其二，使用了createElement方法
2、關于createElement方法，他是通過render函數的參數傳遞進來的，這個方法有三個參數，
第一個參數主要用于提供dom的html內容，類型可以是字符串、對象或函數。比如”div”就是創建一個 <div>標簽
第二個參數（類型是對象）主要用于設置這個dom的一些樣式、屬性、傳的組件的參數、綁定事件之類，具體可以參考 官方文檔 里這一小節的說明
第三個參數（類型是數組，數組元素類型是VNode）主要用于說是該結點下有其他結點的話，就放在這里。
比如說，有需要分發的標簽 <slot>，則通過 this.$slots.default 來獲得，或許還有其他組件之類，可能需要被使用的，應該也是放在這里。
個人初步理解是，在原本被替換的地方，例如例上面代碼中的 <child> 標簽，在其下的每個次一級標簽為一個元素，放在 this.$slots.default這個數組中，例如上面的話，這個數組只有一個元素，但是以下代碼：
<child v-bind:level="2"><div>Hello</div><div> world!</div></child>
這個數組中則有兩個元素，分別是 <div>Hello</div> 和 <div> world!</div>，例如 this.$slots.default[0] 則表示第一個標簽。
另外，假如這2個元素中間有空格、換行符之類，那么數組中則有三個元素，那個空格、換行符則為第二個元素。這個屬性有點類似dom的 childNodes屬性，不是單純以標簽才算作子節點的。（但注意，不是完全相同）
有時候，我們可能想在里面添加其他的組件，例如將abc組件注冊在里面。那么，我們首先要注冊這個abc組件，然后將abc組件在數組里通過createElement來創建標簽，只有通過這樣的方式創建的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 作為第三個參數即可，他本身就是一個數組。
3、總而言之，createElement方法的作用就是動態的創建一個dom用于被render函數渲染，其中參數二和參數三可以選擇性省略，參數二用于設置dom的樣式、屬性、事件等，參數三用于設置分發的內容，包括新增的其他組件。
粗略理解的話，可以理解為：createElement( 標簽名, 標簽屬性, 標簽里的內容)
這樣的話，我們就有了一個組件的模板所需要的全部內容了
總結
1、render方法的實質就是生成template模板；
2、通過調用一個方法來生成，而這個方法是通過render方法的參數傳遞給他的;
3、這個方法有三個參數，分別提供標簽名，標簽相關屬性，標簽內部的html內容
4、通過這三個參數，可以生活曾一個完整的模板。
備注：
1、render方法可以使用JSX語法，但需要Babel plugin插件；
2、render方法里的第三個參數可以使用函數來生成多個組件（特別是如果他們相同的話），只要生成結果是一個數組，且數組元素都是VNode即可
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
