вя J письменной запись

Из - вю createElement с createElement реагирует по- разному, что приводит к JSX формулировкам различны. В данной статье будет записывать некоторую вя из более конкретной формулировки JSX может обратиться к официальному описанию

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 фактически createElementсинтаксический сахар .jsx синтаксис в конечном итоге будет преобразован в функцию createElement. При использовании в JSX этикетке , { ...obj }когда, OBJ будут собраны в createElementкачестве промежуточного параметра.

Следуют отметить, что в Vue createElement с реагировать с тем createElement середины аргументов смыслы одно и то же. В вю в середине аргумента являются объектами данных
, и реагируют, промежуточные параметры props.

Так что, если вам необходимо установить динамические свойства вступают в реакцию в том же ве, что вам нужно:

const props={
    name: 'joyer',
},
// react中
<my-button {...props}></my-button>
// vue中
<my-button {...{
    props: props,
}}></my-button>

Если вы не знаете , в templateсобственности , как jsxиспользование времени, первые могут быть преобразованы в createElementв data对象редакции, а затем {...data}написать jsxна этикетке.

Такие , как передовые компоненты , используемые v-on="$listeners"или v-bind="$attrs"агентом, не уточнил официальный сайт официальный сайт права. v-on="$listeners"И v-привязывать = «$ ATTRS» объяснил, когда createElementсоздается функция, во втором параметре можно записать следующим образом:

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
    })}