<link rel="stylesheet" href="https://js.how234.com/third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" /><script type="text/javascript" src="https://js.how234.com/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript"> SyntaxHighlighter.all(); </script>
java render是什麼?讓我們一起來了解一下吧!
Java render是是組件渲染的重要內容,render函數與template模板開發一樣,只不過這種方式的開發,render更比較接近底層,這樣便可以使Vue編譯時少轉換一次。
一.render函數的返回數值是一個VNode -> "virtual node"虛擬節點
二.render函數的參數是一個createElement函數
三.createElement 函數的參數(三個)
實戰演練,具體步驟如下所示:
/** * render: 渲染函數 * 參數: createElement * 參數類型: Function */ render: function (createElement) { let _this = this['$options'].parent // 我這個是在 .vue 文件的 components 中寫的,這樣寫才能訪問this let _header = _this.$slots.header // $slots: vue中所有分發插槽,不具名的都在default裏 /** * createElement 本身也是一個函數,它有三個參數 * 返回值: VNode,即虛擬節點 * 1. 一個 HTML 標籤字符串,組件選項對象,或者解析上述任何一種的一個 async 異步函數。必需參數。{String | Object | Function} - 就是你要渲染的最外層標籤 * 2. 一個包含模板相關屬性的數據對象你可以在 template 中使用這些特性。可選參數。{Object} - 1中的標籤的屬性 * 3. 子虛擬節點 (VNodes),由 `createElement()` 構建而成,也可以使用字符串來生成“文本虛擬節點”。可選參數。{String | Array} - 1的子節點,可以用 createElement() 創建,文本節點直接寫就可以 */ return createElement( // 1. 要渲染的標籤名稱:第一個參數【必需】 'div', // 2. 1中渲染的標籤的屬性,詳情查看文檔:第二個參數【可選】 { style: { color: '#333', border: '1px solid #ccc' } }, // 3. 1中渲染的標籤的子元素數組:第三個參數【可選】 [ 'text', // 文本節點直接寫就可以 _this.$slots.default, // 所有不具名插槽,是個數組 createElement('div', _header) // createElement()創建的VNodes ] ) }