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.conponentName
     return <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>
 }