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实现渲染

v-for 循环

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

<script>
export default {
  data() {
    return {
      data: [
        {
          title: 1
        },
        {
          title: 2
        }
      ]
    };
  },
  render() {
    return (
      <div>
        <ul>
          {
            this.data.map(item => {
              return <li>{ item.title }</li>
            })
          }
        </ul>
      </div>
    );
  }
};
</script>

复制代码

v-if 判断

三元运算 方式一

<script>
export default {
  data() {
    return {
      isTrue: true,
    };
  },
  render() {

    const msg = this.isTrue ? '你中奖了' : '很遗憾，没中'
    return (
      <div>
        中奖状况：{ msg }
      </div>
    );
  }
};
</script>
复制代码

三元运算 方式二

<script>
export default {
  data() {
    return {
      isTrue: true,
    };
  },
  render() {
    return (
      <div>
        中奖状况：{ this.isTrue ? '好' : 'no' }
      </div>
    );
  }
};
</script>

复制代码

样式绑定

style方式

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

<script>
export default {
  data() {
    return {
      backgroundColor: 'blue',
      styleObject: {
        backgroundColor: 'red',
        fontSize: '20px',
        color: '#fff'
      }
    };
  },
  render() {
    return (
      <div>
        <span {...{
          style: {
            backgroundColor: this.backgroundColor
          }
        }}>我是蓝色背景</span>

        <span {...{
          style: this.styleObject
        }}>我是红色背景</span>
      </div>
    );
  }
};
</script>

复制代码

class 方式

<script>
export default {
  data() {
    return {
      isBlue: true,
      classOjbect: ['red']
    };
  },
  render() {
    return (
      <div>
        <span {...{
          class: {
            blue: this.isBlue,
          }
        }}>我是蓝色背景</span>

        <span {...{
          class: this.classOjbect
        }}>我是红色背景</span>
      </div>
    );
  }
};
</script>

<style>
.blue {
  background: blue
}
.red {
  background: red
}
</style>

复制代码

Attrs 绑定

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

<script>
export default {
  data() {
    return {
    };
  },
  render() {
    return (
      <div>
        <span {...{
          attrs: {
            'id': 'app',
            'data-id': '1234'
          }
        }}>我是蓝色背景</span>
      </div>
    );
  }
};
</script>

复制代码

结果: <span id="app" data-id="1234">我是蓝色背景</span>