• 网站建设
• 网站制作
• 建站案例
• 解决方案
• 建站资讯
• 关于我们
• 联系小谭

const el = 
Vue 2
;

const App = {
  render() {
    const tag = `h${this.level}`
    return {this.$slots.default}
  }
}

createElement(  
    'anchored-heading', {  
        props: {  
            level: 1  
        }  
    }, [  
    createElement('span', 'Hello'),  
        ' world!'  
    ]  
)

  
    Hello world!  

import AnchoredHeading from './AnchoredHeading.vue'  
  
new Vue({  
    el: '#demo',  
    render: function (h) {  
        return (  
              
                Hello world!  
              
        )  
    }  
})

Message.alert({
  messge: '确定要删除?',
  type: 'warning'
})

Message.alert({
  messge: 
确定要删除xxx的笔记?
,
  type: 'warning'
})

// 一个文件写多个组件
const Input = (props) => 
export const Textarea = (props) => 
export const Password = (props) => 

export default Input

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

{{ msg }}

const name = 'Vue'
const element = 
Hello, { name }

const element = (name) => {
  if (name) {
    return 
Hello, { name }
  } else {
    return 
Hello, Stranger
  }
}

const element = icon ?  : null;

const list = ['java', 'c++', 'javascript', 'c#', 'php']
return (
  

  {list.map(item => {
   return 
{item}
  })}
  
)

const href = 'https://xxx.com'
const element = xxx

const properties = {a: 1, b: 2}

const element = 

const width = '100px'
const element = 

const confirm = () => {
  // 确认提交
}
确定

 render() {
    // 监听下拉框根元素的click事件
    return 
  }

  render() {
    return (
      
    )
  }

on: {  
    '!click': this.doThisInCapturingMode,  
    '~keyup': this.doThisOnce,  
    '~!mouseover': this.doThisOnceInCapturingMode  
}

export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    // 监听 onInput 事件进行赋值操作
    handleInput(e) {
      this.name = e.target.value
    }
  },
  render() {
    // 传递 value 属性 并监听 onInput事件
    return 
  }
}

export default {
  methods: {
    handleChangeVisible(value) {
      this.visible = value
    }
  },
  render() {
    return (
      
    )
  }
}

 render() {
    return (
      
        {/*这里就是默认插槽*/}
        
这里是弹框内容
      
    )
  }

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (
      
        {/**通过this.$slots.default定义默认插槽*/}
        {this.$slots.default}
      

（2）具名插槽

有时候我们一个组件需要多个插槽，这时候就需要为每一个插槽起一个名字，比如element-ui的弹框可以定义底部按钮区的内容，就是用了名字为footer的插槽

 render() {
    return (
      
        
这里是弹框内容
        {/** 具名插槽 */}
        
          确定
          取消
        
      
    )
  }

自定义具名插槽： 在上节自定义默认插槽时提到了$slots，对于默认插槽使用this.$slots.default，而对于具名插槽，可以使用this.$slots.footer进行自定义

render() {
    return (
      
        {this.$slots.default}
        {/**自定义具名插槽*/}
        {this.$slots.footer}
      
    )
  }

（3）作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的，这时候就需要用到作用域插槽,在JSX中，因为没有v-slot指令，所以作用域插槽的使用方式就与模板代码里面的方式有所不同了。比如在element-ui中，我们使用el-table的时候可以自定义表格单元格的内容，这时候就需要用到作用域插槽

data() {
    return {
      data: [
        {
          name: 'xxx'
        }
      ]
    }
  },
  render() {
    return (
      {/**scopedSlots即作用域插槽，default为默认插槽，如果是具名插槽，将default该为对应插槽名称即可*/}
      
         {
              return {row.name}
            }
          }}
        >
      
    )
  }

自定义作用域插槽：

使用作用域插槽不同，定义作用域插槽也与模板代码里面有所不同。加入我们自定义了一个列表项组件，用户希望可以自定义列表项标题，这时候就需要将列表的数据通过作用域插槽传出来。

render() {
    const { data } = this
    // 获取标题作用域插槽
    const titleSlot = this.$scopedSlots.title
    return (
      
        {/** 如果有标题插槽，则使用标题插槽，否则使用默认标题 */}
        {titleSlot ? titleSlot(data) : {data.title}}
      
    )
  }

使用自定义组件

只需要导入进来，不用再在components属性声明了，直接写在jsx中：

import MyComponent from './my-component'

export default {
  render() {
    return hello
  },
}

在method里返回JSX

我们可以定义method，然后在method里面返回JSX,然后在render函数里面调用这个方法，不仅如此，JSX还可以直接赋值给变量，比如：

 methods: {
    renderFooter() {
      return (
        

          确定
          取消
        
      )
    }
  },
  render() {
    const buttons = this.renderFooter()
    return (
      
        
内容
        {buttons}
      
    )
  }

用JSX实现简易聊天记录

假设该消息聊天记录的消息类型只有三种：文本，图片，引用。一条消息里面可以包括任意类型的内容，引用类型消息内部可以不断嵌套引用其他任意类型消息。效果图大致如下：

消息数据结构如下：

message: [
      // 每个数组的第一个参数为消息类型：0：文本 1：图片 2：引用。第二个参数为具体内容
      [
        0,
        '文本'
      ],
      [
        1,
        '图片链接xxx'
      ],
      [
        2,
        [
          [
            0,
            '引用文本文本文本'
          ],
          [
            1,
            '引用图片链接xxx'
          ]
        ]
      ]
    ]

主要有两个思路：

1、思路一：在render里返回一段用array.map渲染的消息模板，对于三种消息类型，使用if-else进行判断分别渲染，对于引用类型的消息，可以封装一个方法进行渲染，方法里面如果还有引用类型消息就继续递归渲染。

methods: {
    // 展示引用消息
    showQuote (msg) {
      return (
        
          引用：
          {msg.map(item => {
            if (item[0] === 0) {
              return {item[1]}

            } else if (item[0] === 1) {
              return (
                
                
              )
            } else {
              return this.showQuote(item[1])
            }
          })}
        
      )
    }
  },
  render (h) {
    return (
      
        {this.recordList.map(item => {
          return (
            

              
                
                  { `${item.sendUserNick}（${item.sendUserNet}） → ${item.receiverNick}（${item.receiverNet}）` }
                
                
                  { this.formatTime('YYYY-mm-dd HH:MM:SS', item.timeStamp) }
                
              
              
                {item.message.map(msg => {
                  if (msg[0] === 0) {
                    return {msg[1]}

                  } else if (msg[0] === 1) {
                    return (
                      
                      
                    )
                  } else {
                    // 递归渲染引用类型消息
                    return this.showQuote(msg[1])
                  }
                })}
              
            
          )
        })}
      
    )
  }

2、思路二：第一种思路中封装的showQuote里面的代码与render中渲染消息内容的代码基本相似，因此其实现方式不够优雅。其实可以将整个消息的渲染封装成一个组件，在该组件内引入自己，然后再渲染自己。由于具体细节代码与上述类似，这里只给出思路代码，具体细节请忽略

// 当前组件就是RecordMessage组件，自己引入自己
import RecordMessage from './RecordMessage.vue'

export default {
    props: {
        message: {
            type: Array,
            default: () => []
        }
    },
    render () {
        const parseMessage = msg => {
            const type = msg[0]
            if (type === 0) {
                // 文本
            } else if (type === 2) {
                // 图片
            } else {
                // 引用类型
                return (
                    

                        
引用：
                        {
                            msg[1].map(subMsg => (
                                // 自己递归渲染自己
                                
                                
                            ))
                        }
                    
                )
            }
        }
        return parseMessage(this.message)
    }

以上就是“Vue中的JSX如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。