ディレクトリ
そのためのcreateElementとVUEののcreateElementのJSX文言につながる、異なる反応をこの記事ではJSXを参照することができ、より具体的な文言の一部VUE記録します異なっている。公式の説明を
Vモデルの言葉遣い
Vモデルの文言の公式ウェブサイトは、私たちが必要とする、現実的ではありません。
<el-input v-model="inputValue"/>
//
<el-input vModel_trim={inputValue}/>
//或者使用
<el-input
value={this.inputValue}
on-input={val => this.inputValue = val}/>V-用
<el-tag
v-for="(item, index) in content"
:key="index"
type="success"
>
{{item.name}}
</el-tag>
//
{
this.content.map((item, index) => {
return (
<el-tag
key={index}
type="success"
>
{item.name}
</el-tag>
)
})
}イベント＆モディファイアキー
公式の言葉遣い
<input vOn:click_stop_prevent="newTodoText" />一部のエディタには、構文エラーを促すメッセージが表示されます
、次の文言を使用することをお勧めします
<el-input
@keyup.native.enter="fetch()"
@click="click()"
class="width-20"
prefix-icon="el-icon-search"
placeholder="关键字搜索"
/>
// 或者为:
<el-input
class="width-20"
nativeOn-keyup={arg => arg.keyCode === 13 && this.fetch()}
on-click={_ => {this.click()} }
prefix-icon="el-icon-search"
placeholder="关键字搜索"
/>なお、使用しないでon-click={this.click() }、溶液が:.与えられているこの書き込みを
on-click={this.click.bind(this, args) }、しかし、提案された文言がありon-click={() => {this.click(args)} }、次のように記述する必要はありませんbind(this)。
データの書き込み
JSX実際createElementJSXにラベルを使用する場合のシンタックスシュガー.jsxの構文は、最終的には。のcreateElement関数に変換されます{ ...obj }objがにコンパイルされ、createElement中間パラメータを。
、のVUE尚のcreateElementを反応させるとのcreateElementの引数の中央が意味は同じである引数の途中でVUEである。データ・オブジェクト
、および反応、中間パラメータですprops。
あなたは同じVUEに反応する動的なプロパティを設定する必要があるのであれば、次のものが必要です。
const props={
name: 'joyer',
},
// react中
<my-button {...props}></my-button>
// vue中
<my-button {...{
props: props,
}}></my-button>あなたが知っていない場合はtemplateどのようにの財産jsx時間の使用、最初に変換することができ、その後、言葉遣い書きラベルに。createElementdata对象{...data}jsx
このような高度な使用する成分としてv-on="$listeners"またはv-bind="$attrs"エージェント、右の公式サイト公式サイトが指定されていませんでした。v-on="$listeners"そして、V-バインド=「$ attrsには」と、説明したcreateElement機能が作成され、2番目のパラメータで次のように書くことができます。
return createElement('div', {
props: {
...$attrs,
otherProp: value,
},
on: {
...$listeners,
click() {
},
}
},this.$slots.default])JSXでは、あなたはまた、データを使用することができ、構文は次のとおりです{...data}：
// 官网推荐写法
<button domPropsType="submit"><button>
// data方式写法
<button { ...{
domProps: {
type: 'submit',
},
}}><button>あなたが書く方法上記の特性でJSXの要素を知っていないときに、あなたは、データオブジェクトのすべてを書き、次にできる...data要素について。
const data = {
domProps: {
type: 'submit',
},
scopedSlots: {
default: props => createElement('span', props.text)
},
props: {
...$attrs,
otherProp: value,
},
on: {
...$listeners,
click() {
},
}
}
<button { ...data }><button>これは解決するだろうv-on="$listeners"かv-bind="$attrs"。
あなたが使用している場合があります{...data}で高度なコンポーネントを{...data}ラベルが使用されるアセンブリv-bind="$attrs"または{...data}アセンブリ、また、現在のコンポーネントでattrsに設定する必要があります：
としてcd-table-column-idソース：
<cd-table-column { ...{
props: this.$attrs,
attrs: this.$attrs,
on: this.$listeners,
scopedSlots,
} } bold>
</cd-table-column>cd-table-column出典：
<el-table-column { ...{
props: columnAttrs,
on: columnListeners,
scopedSlots,
} }>
</el-table-column>これは、あるcd-table-columnの使用があり{...data}書き込みは、その小道具コンポーネントが空であるので、セットの小道具が無効である、我々は追加する必要がありattrsを通じてattrs継承メカニズムcd-table-column-idれるthis.$attrsに渡されます。cd-table-columnthis.$attrs
スロット言葉遣い
デフォルト
<button>
<slot></slot>
</button>
//
<button>
{this.$scopedSlots.default()}
</button>名前付きスロット：
<button>
<slot name="before"></slot>
<slot ></slot>
</button>
//
let before = '';
if (this.$scopedSlots.before) {
before = this.$scopedSlots.before(props => props.text);
}
return (
<button>
{ before }
{this.$scopedSlots.default()}
</button>スコープスロット：
<slot :isAdvancedPanelShow="isAdvancedPanelShow"></slot>
//
{this.$scopedSlots.default({
isAdvancedPanelShow: this.isAdvancedPanelShow
})}