Vue+JSX使用例子

Props

传递参数

/src/Demo.vue 子组件

<script>
export default {
  props: ["msg"],
  render() {
    return (
      <div>
        <p>子组件</p>
        <p>msg: {this.msg}</p>
      </div>
    );
  }
};
</script>

/src/App.vue 父组件

<script>
import Demo from "./Demo";
export default {
  data() {
    return {
      msg: "default"
    };
  },
  render() {
    return (
      <div>
        <p>父组件</p>
        <hr />
        <Demo msg={this.msg} />
      </div>
    );
  }
};
</script>

使用 JSX 编写之后，你会发现以上对比以前的写法，好像缺少了 components 这个配置项。

是的，JSX上你完全不用配置 compoents ，直接写上去就行，这是我比较喜欢的

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

绑定事件

src/App.vue 父组件

<script>
import Demo from "./Demo";
export default {
  data() {
    return {
      msg: "default"
    };
  },
  methods: {
    handleOnInput(e) {
      // 子组件 input的事件回调
      // 实现 改变msg值
      this.msg = e.target.value;
    }
  },
  render() {
    return (
      <div>
        <p>父组件</p>
        <p>msg: {this.msg}</p>
        <hr />
        <Demo msg={this.msg} handleChange={this.handleOnInput} />
      </div>
    );
  }
};
</script>

<Demo handleChange={ this.handleOnInput} />

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

/src/Demo.vue 子组件

<script>
export default {
  props: ["msg", "handleOnChange"],
  render() {
    return (
      <div>
        <p>子组件</p>
        <p>msg: {this.msg}</p>
        
        <!--onInput被触发时，交由父组件事件处理-->
        <input value={this.msg} onInput={this.handleChange} />

      </div>
    );
  }
};
</script>

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

<input onInput={this.handleChange} />
当输入框触发 onInput 事件时，交由父组件的事件处理

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

传递组件

/src/components/HelloWorld.vue

export default {
    render() {
      return (
          <div>Hello</div>
      );
    }
}

/src/Demo.vue

export default {
    props: ["component"],
    render(h) {
      return (
          <div>
              <p>子组件</p>
              
              <!--父组件传入来的组件-->
              { h(this.component) }
          </div>
      );
    }
}

/src/App.vue

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

    render(h) {
      return (
          <div>
              <p>父组件</p>
              
              <!--向子组件传入组件-->
              <Demo component={HelloWorld} />
          </div>
      );
    }
}

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

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