vue Render scopedSlots

render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的<slot>的使用没有name 。想使用多个slot 的话。需要对slot命名唯一。

在render函数中动态使用多个slot，并且给slot传值

一、我的业务逻辑：

使用了三个组件，

组件A调用组件B，组件B调用组件C，组件C是自己封装的render渲染组件。

组件A希望将自己自定义的插槽插到C组件，C组件渲染出自定义的内容，并且将C组件的值传递给B组件和A组件，B组件是对C组件进行更大一层的封装

A组件调用B组件

<index-grid><divslot="name"slot-scope="field"class="check-link"@click="rowLinkClick"><span>{{ field.field.rowData.name }}</span></div>
</index-grid>

A组件引用B组件，slot-scope接收从B组件中传出来solt的值，slot=“name”,是为插槽具名；

B组件中调用C组件的render函数

<sub-grid ref="indexGridSub"><spanv-for="(item, index) in fields":key="index"slot="name"slot-scope="field"><slot name="name" :field="field"></slot></span></sub-grid>

B组件span中 slot是动态的值，和A组件中的slot同一个值，才能接受来自A组件自定义的插槽，

field是来自于C组件中传递的值

C组件是render函数

h("td",{style: { width: field.width + "px" },class: { borderRight },// 作用域插槽格式// { name: props => VNode | Array<VNode> }scopedSlots: this.$scopedSlots.name,// 如果组件是其他组件的子组件，需为插槽指定名称slot: 'name'},this.$scopedSlots.name({field: field,rowData: rowData,}));

C组件往上传递的值就是{field：'', rowData: ''}的对象

欢迎关注我的个人技术公众号！javascript艺术

vue Render scopedSlots相关推荐

vue render函数_Vue原理解析（一）：Vue到底是什么？
Vue,现在前端的当红炸子鸡,随着热度指数上升,实在是有必要从源码的角度,对它功能的实现原理一窥究竟.个人觉得看源码主要是看两样东西,从宏观上来说是它的设计思想和实现原理:微观上来说就是编程技巧,也就 ...
Vue render渲染函数
这里写自定义目录标题 Vue render渲染函数基础 render渲染函数的作用 render函数讲解 render和template的区别 render举例 Vue render渲染函数基础 ...
vue render函数
Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 比如如下我想要实现如 ...
vue render 渲染函数属性写法
// 数组映射结构render: (h) => {let renderHtml = [];for (let attr in markLineName) {let itemData = mark ...
vue render
/** * render: 渲染函数 * 参数: createElement * 参数类型: Function */ render: function (createElement) { let _t ...
vue render 渲染html,详解vue渲染函数render的使用
1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如 ...
iview render函数（vue render函数）
iview 的render函数就是vue的render函数,iview常用在表格里面自定义内容,下面来看render函数常用的配置: 1. h是createdElement的简写,有3个参数: 语法: ...
vue render生成html,在vue中如何渲染函数render（详细教程）
本篇文章主要介绍了vue渲染函数render的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.什么是render函数? vue通过 template 来创建你的 ...
render注册一个链接组件_[vue]render函数渲染组件
常规渲染组件 1.放到对应的插槽 2,不会覆盖 {{msg}} let login = { template: " login zujian " }; let vm = new V ...

vue Render scopedSlots

vue Render scopedSlots相关推荐

最新文章

热门文章