vue2 jsx 语法

官网：https://github.com/vuejs/jsx#installation (opens new window)

# v-mode

<template>   
<el-input v-model.trim="inputValue"/>
</template>

1
2
3

// 方式1：
export default {
render(){      
     return(       
           <el-input vModel_trim={inputValue}/>
          )    
}
}
// 方式2：
export default {       
render(){               
 return( 
     <el-input  
         value={this.inputValue} 
         onInput={val => this.inputValue = val.trim()}/> 
  )      
 ｝
｝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# v-if

<template>   
 <div v-if="user.age > 18">      Welcome, {{user.name}}    </div>
</template>

1
2
3

export default {
 methods: {      
  checkStatement(){  
   if (this.user.age > 18) {          
            return <div> Welcome, { this.user.name }</div>; 
    }      
 }   
 },  
  render(){      
   return(       
         {this.checkStatement()}     
        )    
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# v-for

<template>
 <div v-for="item in items" :key="item.id">     {{ item }}  </div>
</template>

1
2
3

render(){
 return(
 {
  this.items.map(item => {
   return (  <div> {item} </div>)
  })
}

1
2
3
4
5
6
7

# v-on 事件绑定

<template>
 <button v-on:click="handleButtonClick()"> click me</button>
</template>
<script>
export default {
 methods: {
   handleButtonClick(e){
     e.preventDefault();
     alert('button clicked')
   }
 },  
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

export default {
 methods: {
  handleButtonClick(){  
          e.preventDefault();
          alert('button clicked')
  }
 },  
 render(){
    return(
     <div>
      // 不传值
       <button onClick={this.handleButtonClick}> click me</button>
      // 需要传值
      <button onClick={this.re.bind(this, args)}> click me</button>
     // 需要传值
       <button {...onClick: {this.re.bind(this, args)}}> click me</button>
     </div>
    )
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 事件绑定修饰符: 修饰符需要自己在代码中实现。或者可以使用修饰符简写，对照官网的语法, jsx写法为

<template>
 <button @click.stop="handleButtonClick()"> click me</button>
</template>
<script>
export default {
 methods: {
  handleButtonClick(e){
    alert('button clicked')
 }
 },  
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

export default {
  methods: {
    doThisInCapturingMode(e) {
      e.preventDefault()
      alert('button clicked')
    },
  },
  render() {
    return <button onClick={this.doThisInCapturingMode}>阿萨德发</button>
  },
}

1
2
3
4
5
6
7
8
9
10
11

# v-html

<template>
 <div v-html="rawHtml"> </div>
</template>
<script>
 export default {
 data () {
  return {        rawHtml: "<h1> This is some HTML </h1>",      }
 }
}
</script>

1
2
3
4
5
6
7
8
9
10

 export default {
 data(){
  return{
   rawHtml: "<h1> This is some HTML </h1>",
  }
 },  
 render(){
  return(
   <div>
    <div domPropsInnerHTML={this.rawHtml}> </div>
   </div>
  )
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 引入组件

<template>  
 <div>    <NewComponent/>  </div>
</template>
<script>
import NewComponent from "NewComponent.vue";
export default {
  components:{        
   NewComponent,
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11

import NewComponent from 'NewComponent.vue'
render(){
  return(     <div> <NewComponent/></div>    )
}

1
2
3
4

# props传值

// 父组件
<template>  
 <childCompents  :diunilaomu="445646">   </childCompents>
</template>
// 子组件
<template>  
 <div>
  {{diunilaomu}}
 </div>
</template>
<script>
export default {
 props:{
  diunilaomu:{
   type: Number,
   default: 0
  }
 }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

render(){
 return(    <childCompents  diunilaomu="2131231"><button>  )
}

1
2
3

# 高阶组件中的v-on="$listeners"和v-bind="$attrs"

<template>  
 <div v-bind="$attrs" v-on="$listeners">   </div>
</template>

1
2
3

const data = {
 props: {
             ...$attrs,
             otherProp: value,
  },
 on: {  
            ...$listeners,
           click() {     },
 }}
render(){
 return(    <button { ...data }><button>  )
}

1
2
3
4
5
6
7
8
9
10
11
12

# slot写法

# 默认插槽模板写法

<template>  
<button>
  <slot></slot>
</button>
</template>

1
2
3
4
5
6

 ....  
render(){
 return( <button>    {this.$scopedSlots.default()}</button> )
}

1
2
3
4

# 具名插槽模板写法

# 定义具名插槽

<template>  
 <button>    
  <slot name="before"></slot>
  <slot></slot>
 </button>
</template>

1
2
3
4
5
6

 render(){    
let before = '';
if (this.$scopedSlots.before) {    
      before = this.$scopedSlots.before(props => props.text);
}
return( <button>    
 { before }
 {this.$scopedSlots.default()}</button> 
 )
}

1
2
3
4
5
6
7
8
9
10

# 使用具名插槽

<template>
  <div>
    <Child>
      <!-- 使用 -->
      <div>这是默认插槽的内容啊</div>

      <!-- 具名插槽 -->
      <footer slot="footer">这是具名插槽的内容啊，</footer>
    </Child>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11

export default {
  render(h) {
    return (
      <div>
        <Child>
          <div>这是默认插槽的内容啊</div>
          {/* 具名插槽 */}
          <footer slot="footer">这是具名插槽的内容啊，</footer>x
        </Child>
      </div>
    )
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 作用域插槽模板写法1

# 作用域插槽的定义

<template>
  <!-- 作用域插槽 -->
  <div>
    <header>
      <!-- 具名插槽作用域插槽--header  在 jsx 中可以通过 $scopedSlots.header(传递的数据) 渲染-->
      <slot name="header" msg="具名作用域插槽--header"></slot>
    </header>

    <main>
      <!-- 默认作用域插槽  在 jsx 中可以通过 $scopedSlots.default(传递的数据) 渲染-->
      <slot msg="默认作用域插槽"></slot>
    </main>
    <footer>
      <!-- 具名插槽作用域插槽--footer  在 jsx 中可以通过 $scopedSlots.footer(传递的数据) 渲染-->
      <slot name="footer" msg="具名作用域插槽--footer"></slot>
    </footer>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export default {
  render() {
    return (
      <div>
        <header>{this.$scopedSlots.header?.({ msg: "具名作用域插槽--header" })}</header>
        <main>{this.$scopedSlots.header?.({ msg: "默认作用域插槽" })}</main>
        <footer>{this.$scopedSlots.footer?.({ msg: "具名作用域插槽--footer" })}</footer>
      </div>
    )
  },
}

1
2
3
4
5
6
7
8
9
10
11
12

# 作用域插槽的使用

<template>
  <div>
    <Child>
      <!-- 三种方法可以使用 #、v-slot、slot-scope  -->

      <!-- 使用 slot-scope 写法 vue 2.6.0 已废弃的使用 slot-scope  -->
      <template slot="header" slot-scope="{ msg }">
        <div>{{ msg }}</div>
      </template>

      <!-- 默认作用域插槽  -->
      <template #default="{ msg }">
        {{ msg }}
      </template>

      <!-- 作用域插槽--footer -->
      <template v-slot:footer="{ msg }">
        {{ msg }}
      </template>
    </Child>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

export default {
  render() {
    return (
      <div>
        <Child
          scopedSlots={{
            header({ msg }) {
              return <div>{msg}</div>
            },
            default: (scoped) => {
              return scoped.msg
            },
            footer: ({ msg }) => {
              return msg
            },
          }}
        ></Child>
      </div>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 指令

作用域插槽实例: 饿了么table template 如何转换成jsx

<template>  
  <div v-qq>  </div>
</template>

1
2
3

import NewComponent from 'NewComponent.vue'
render(){
  const directives = [  { name: 'my-dir', value: 123, modifiers: { abc: true } }]
  return(   <div directives ={directives }/>   )
 }

1
2
3
4
5

# 参考资料

上次更新: 2023/12/18, 15:00:26

← vuepress添加sitemap nodjs 爬取喜欢的的背景图片→