vue render
/**
* 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
]
)
}
---------------------
版權聲明:本文為CSDN博主「__Amy」的原創文章,遵循CC 4.0 by-sa版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/sansan_7957/article/details/83014838
轉載于:https://www.cnblogs.com/liuliang389897172/p/11307063.html
總結
以上是生活随笔為你收集整理的vue render的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MySql中delimiter
- 下一篇: vue 组件的封装