Vue+JSX使用例子

Props

传递参数

/src/Demo.vue 子组件

/src/App.vue 父组件

使用JSX编写之后，你会发现以上对比以前的写法，好像缺少了components这个配置项。
是的，JSX上你完全不用配置compoents，直接写上去就行，这是我比较喜欢的

以上简单的参数传递（单向绑定）想必大家都能懂，但如何实现双向绑定呢？

绑定事件

src/App.vue 父组件

子组件的handleChange props值与父组件 handleOnInput绑定

/src/Demo.vue 子组件

props:["handleOnChange"] 事件必须要配置

当输入框触发onInput事件时，交由父组件的事件处理

其实JSX双向绑定就是从原生事件中获取到值之后赋值到对应的变量中，从而达到v-model的效果

传递组件

/src/components/HelloWorld.vue

export default {
    render() {
      return (
          
Hello
      );
    }
}

/src/Demo.vue

export default {
    props: ["component"],
    render(h) {
      return (
          

              
子组件
              
              
              { h(this.component) }
          
      );
    }
}

/src/App.vue

import HelloWorld from './components/HelloWorld'
import Demo from './Demo'
export default {

    render(h) {
      return (
          

              
父组件
              
              
              
          
      );
    }
}

通过props方式，把一个组件传入到子组件中渲染

利用render(h)的h实现渲染

组件库事件绑定

当使用组件库开发的时候，事件名称如果有on-*的，可以使用下面的写法

exrpot default {
  render() {
    return (
       {
            // 业务逻辑代码...
          }
        }
      }}>上传
    )
  }
}

v-for 循环

在JSX中，循环得使用array.map()的方式来

v-if 判断

三元运算 方式一

三元运算 方式二

样式绑定

style方式

主要在标签上 使用{...{}}进行绑定

class 方式

Attrs 绑定

常用的动态id、data-*赋值

结果: 我是蓝色背景

Slots 插槽

配置{...{scopedSlots}}

  
  
   {
          // props.row 当前行的数据
          return props.row.shop_status ? 启用 : 禁用
        }
      }
    }}
  >