jsx语法技巧vue

v-bind="$attrs"

v-bind="$attrs"
<div {...{attrs: this.$attrs}}></div>

使用插槽


// 父组件
import Child from './components/Child'
render() {return (<div><Child>{{ default: props => '插槽内容' + props.name}}</Child></div>)
}// 子组件
render() {return (<div><h2>我是child组件</h2>{this.slots.default ? this.slots.default(props) : '默认内容'}</div>)
}

// 作用域插槽 具名插槽的传递
// 父级<template v-for="(item) in columns"><table-column:key="item.prop":table-data="tableData"v-bind="{ ...$attrs, ...item }"><template v-if="item.prop === 'dataRight'" #content><el-tag>tag</el-tag></template></table-column></template>// 中间层组件return (<tableColumn minWidth={reMinWidth} canCopy={canCopy} {...{ attrs: this.$attrs }} scopedSlots={this.$slots.content ? { content: (props) => this.$scopedSlots.content() } : null}></tableColumn>)// 重点
scopedSlots={{ content: (props) => this.$scopedSlots.content() }}>// 最后一级
<el-table-column v-bind="{ ...$props, ...$attrs}" :class-name="getSortClass(prop)"><template slot-scope="scope"><slot name="content">{{ parserValue(scope.row[prop], formatter) }}</slot></template>
</el-table-column>

component

// jsx返回下面动态组件 会报错 component组件未注册
return (<keep-alive><component is={componentName} value={value}/></keep-alive>
)
// 方法
render(h) {if (this.conponentName) {const Tag = this.conponentNamereturn <Tag value={this.value} />} else return <span>{this.value}</span>}render(h) {if (this.conponentName) {return <this.conponentName value={this.value} />} else return <span>{this.value}</span>}

jsx语法技巧vue相关推荐

【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
所有内容首发微信公众号[WEB前端李志杰],未经允许禁止转载! 可能大家要问我为什么要使用jsx语法开发Vue? 首先要说明的是:个人认为jsx语法和模板语法并不存在优劣之分,在实际项目中应该优先选择 ...
Vue如何支持JSX语法
关于我在开发中遇到的这个问题,好像是JSX才支持的语法. 通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 ...
在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
Vue 中如何配置项目支持 JSX 语法
Vue 是使用的的模板语法,Vue的模板实际上就是编译成了 render 函数,同样支持 JSX 语法.在 Vue 官网中,提供 createElement 函数中使用模板中的功能. createEl ...
02 Vue进阶 render和jsx语法使用
一.render语法 render.js import Vue from 'vue'const component = {props: ['props1'],name: 'comp',// templ ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...

jsx语法技巧vue

v-bind="$attrs"

使用插槽

component

jsx语法技巧vue相关推荐

最新文章

热门文章