JSXコンポーネントでVue.jsテンプレートの優れた機能を使用する

投稿日: 2022-04-20 2022-10-09
タグ: Vue.js

JSXのような特定の人々。 JSXは生き方だと考える人もいます。 Vue.jsのテンプレートは、存在すべきかどうかについて理想的に意見が一致しない場合でも、一般的な慣行の便利な省略形を提供することにすべての関係者が同意していると確信しています。ただし、JSXの方が柔軟性が高いのは事実です。ただし、柔軟性には冗長性が伴います。特に、Vueのイベント修飾子および v-model は、JSXコンポーネントには存在しません。

ありがたいことに、誰かはこれらの機能の両方の必要性を認識し、コミュニティプラグインを作成したので、余分な手間をかけずにJSXを使用できるようになりました。

JSXvモデル

v-model に問題を抱える人もいれば、単一のコンポーネントを記述して理解するために必要なコードの量を減らすのに非常に役立つと感じる人もいます。 babel-plugin-jsx-v-model は、VueJSXでv-modelのサポートを追加します。

インストール

# Install through NPM...
npm install babel-plugin-jsx-v-model --save-dev
# ... or Yarn
yarn add babel-plugin-jsx-v-model -D

今、追加します jsx-v-model あなたのbabel構成のプラグインに。

.babelrc（部分的）

...
  "plugins": ["jsx-v-model", "transform-vue-jsx"],
...

使用法

export default {
  data() {
    return {
      syncData: ''
    }
  },

  render: h => {
    return (
      <div class="component-wrapper">
        <h2>{this.syncData}</h2>
        <input type="text" v-model={this.syncData} />
      </div>
    )
  }
}

さて、このv-modelの実装は、今のところVueテンプレートの実装ほど堅牢ではありませんが、ほとんどのユースケースでは十分であることに注意してください。それは確かに毎回これを書かなければならないことを打ち負かします：

export default {
  data() {
    return {
      syncData: ''
    }
  },

  render: h => {
    return (
      <div class="component-wrapper">
        <h2>{this.syncData}</h2>
        <input type="text" value={this.syncData} onInput={this.setSyncData}/>
      </div>
    )
  },

  methods: {
    setSyncData(evt) {
      this.syncData = evt.target.value
    }
  }
}

JSXイベント修飾子

イベント修飾子は、Vueが持っているもう1つの巧妙なトリックであり、物事を少しだけ冗長にします。（また、プレゼンテーションロジックをビジネスロジックから分離します。） babel-plugin-jsx-event-modifiers は、そのサポートも追加します。（追加のボーナスとして、このプラグインはReact JSXでも機能します。）

さて、これがVue.jsで利用可能な多数のイベント修飾子全体をサポートしておらず、カスタムのもののサポートも追加していないことは何の価値もありません。標準のバブリングコントロールとキー修飾子を実装するだけです。

：stop-次の関数を含む関数でイベントをラップします event.stopPropagation().
：prevent-次の関数を含む関数でイベントをラップします event.preventDefault().
：k[キーコード]一致するキーが押された場合にのみイベントを発生させます。（これは、Vueの実装とは異なります。 k プレフィックス。）キーイベントでのみ有効です。
：{キー名} 一致するキーが（名前で）見つかった場合にのみイベントを発生させます。

有効なキー名：
- esc
- tab
- enter
- space
- up
- down
- left
- right
- delete

インストール

# Install through NPM...
npm install babel-plugin-jsx-event-modifiers --save-dev
# ... or Yarn
yarn add babel-plugin-jsx-event-modifiers -D

今、追加します jsx-event-modifiers あなたのbabel構成のプラグインに。

.babelrc（部分的）

...
  "plugins": ["jsx-event-modifiers", "transform-vue-jsx"],
...

使用法

export default {
  render: h => {
    return (
      <div class="component-wrapper">
        <button onClick:prevent={this.doSomething}>
          Do Something
        </button>

        <input type="text"
          placeholder="To do something, press enter."
          onKeyup:enter={this.doSomething}
        />
      </div>
    )
  },

  methods: {
    doSomething() {
      ...
    }
  }
}

これもまた、代替案よりも大幅に改善されています。

export default {
  render: h => {
    return (
      <div class="component-wrapper">
        <button onClick:prevent={evt => {
          evt.preventDefault();
          this.doSomething();
        }}>
          Do Something
        </button>

        <input type="text"
          placeholder="To do something, press enter."
          onKeyup:enter={evt => {
            if (evt.charCode === 13) {
                this.doSomething()
            }
          }}
        />
      </div>
    )
  },

  methods: {
    doSomething() {
      ...
    }
  }
}

そうですね、JSXでVueテンプレートの最高の部分を楽しんでください！

そして、magicまたはnon-javascriptynessについて不平を言う人がいたら誓います…

getdocs

13036