Vue3使用render函数渲染插槽,以Naive UI为例

网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术,

少废话,上代码:

h(NPopconfirm,{onPositiveClick: () => positiveClick(),negativeText: 'negativeText',positiveText: 'positiveText'},{trigger: () =>                                 //trigger插槽的内容h(NButton,{},                                         //被render的元素的属性啥的,可以自定义[//h('i', {class: ['iconfont', 'icon-xiajia']}),  //这里是放被button包裹的元素h('span', {}, 'button上的文字')]),default: () =>                                   //默认内容h('span',{},'popconfirm的默认提示词'))              }
)

这是Naive UI的popconfirm组件

如果用Dom写是这样的:

  <NPopconfirm@positive-click="positiveClick"negative-text="negativeText"positive-text="positiveText"><template #trigger><NButton>button上的文字</NButton></template>popconfirm的默认提示词</NPopconfirm>

最终效果是这样的

一般来说render函数第三个参数是数组的,但是如果是插槽的话就得用对象的写法了

vue3 使用render函数渲染插槽,以Naive UI为例相关推荐

Render函数渲染页面
Render是使用js的完全编程能力来渲染页面,即用js来构建DOM. 说明:render是一个方法,自带一个形参createElement(还有context..),这个参数也是一个方法,是用来创建 ...
iview使用render函数渲染嵌套表格
iview使用render函数渲染嵌套表格最近做项目遇到iview表格渲染,通过render函数来实现循环嵌套渲染表格及单元格内容,返回文字提示包含icon按钮的图标,当鼠标移到"复制&q ...
render注册一个链接组件_[vue]render函数渲染组件
常规渲染组件 1.放到对应的插槽 2,不会覆盖 {{msg}} let login = { template: " login zujian " }; let vm = new V ...
ReactDOM.render()函数、条件渲染、列表渲染
ReactDOM.render() 1.ReactDOM.render函数是整个 React 应用程序首次渲染的入口函数 2.ReactDOM.render是React的最基本方法用于将模板转为HTM ...
详解在vue项目中使用render函数
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力.这时你可以用渲染函数,它比模板更接近编译器. 基础如何使用: rend ...
【Vue】render函数使用和详解
前言在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要通过JavaScript 的编程能力来进行操 ...
iview在render函数中添加Poptip提示
前言: 在使用iview的table的时候删除一般为了防止误删,我们会用 poptip 气泡提示来进行操作二次限制,这里使用iview的table的render函数渲染直接加入效果图: 实现代码: ...
render函数介绍，以及 render: h =gt; h(App)
原地址很多朋友对于长篇大论看不下去,有的呢是有接触过这些,所以我们今天吧总结写在前边.需要的朋友可以往下看: 总结: 1. render方法的实质就是生成template模板: 2. 通过调用 ...
vue3使用render渲染demo
vue3中提供了一个h函数用来渲染demo 首先引入 import { h, Ref, ref } from "vue"; 定义函数渲染 h函数存在三个参数第一个为标签名称,第二个 ...

vue3 使用render函数渲染插槽,以Naive UI为例

Vue3使用render函数渲染插槽,以Naive UI为例

网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术,

少废话,上代码:

这是Naive UI的popconfirm组件

如果用Dom写是这样的:

最终效果是这样的

一般来说render函数第三个参数是数组的,但是如果是插槽的话就得用对象的写法了

vue3 使用render函数渲染插槽,以Naive UI为例相关推荐

最新文章

热门文章