vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函數
經?？吹绞褂胷ender渲染函數的示例，而且在一些特殊情況下，確實更好使用，可以更加有效地細分組件，因而借助vue-element-admin來學習一波
render函數分析
函數式組件
基礎的使用方式
Link.vue
// https://github.com/vuejs/eslint-plugin-vue/issues/462
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
methods: {
linkProps(url) {
if (isExternal(url)) {
return {
is: 'a',
href: url,
target: '_blank',
rel: 'noopener'
}
}
return {
is: 'router-link',
to: url
}
}
}
}
上述方式打開了一個新的使用方式，這樣的好處，不需要使用if/else進行處理，還可以減少一個多余的標簽【root element】。但是會有一些語法提示錯誤，雖然添加了eslint-disable來禁止，但還是不行，而且有些不似vue的用法
改造開始
版本一 非函數式組件 【Link.vue】
import { isExternal } from '@/utils/validate'
export default {
name: 'Link',
props: {
to: {
type: String,
required: true
}
},
render(h) {
if (isExternal(this.to)) {
return h(
'a',
{
attrs: {
target: '_blank',
rel: 'noopener',
href: this.to
}
},
this.$slots.default
)
} else {
return h('router-link',
{
props: {
to: this.to
}
},
this.$slots.default
)
}
}
}
主要是slot如何處置比較好，其他都好處理，而且使用slot有兩種方式 插槽
方式一
this.$slots.default
方式二
this.$scopedSlots.default()
版本二 函數式組件 【Link.vue】
import { isExternal } from '@/utils/validate'
export default {
name: 'Link',
functional: true,
props: {
to: {
type: String,
required: true
}
},
render(h, context) {
console.log(context)
const { props, scopedSlots } = context
const { to } = props
if (isExternal(to)) {
return h(
'a',
{
attrs: {
target: '_blank',
rel: 'noopener',
href: to
}
},
scopedSlots.default()
)
} else {
return h('router-link',
{
props: {
to: to
}
},
// scopedSlots.default()
context.children
)
}
}
}
對于上述兩種實現方式，大致相同，有一些細節需要注意
functional: true 添加這個后，只能通過 context來進行上下文關聯，而無法調用this，同時這種方式會快一些，只是在使用slot時，會有兩種形式link
this.$slots.default 更新為 context.children
scopedSlots.default() 這種方式依舊在
當時用functional: true，文件名便可以改為js為后綴了，若依舊使用vue時，便需要 進行包裹了
總結
render函數更多是，很多細節不能使用語法糖來進行處理，導致使用起來不順手
slot插槽這塊還是很有用的，只是文檔說明等沒有前面的那么詳細了
通過上述方式，便發現原來可以這么玩，而且細粒度已經都要一層標簽了，若使用原來的方式，root element怕是就夠處理好一會兒了
總結
以上是生活随笔為你收集整理的vue 渲染函数处理slot_vue render 渲染函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python创建数据库表_Python
- 下一篇： android 流量统计工具,Andro