[Advanced Vue] Научит вас использовать JSX в Vue

Vue.js
[Advanced Vue] Научит вас использовать JSX в Vue

Что такое JSX

JSXэтоJavascriptграмматическое расширение ,JSX = Javascript + XML, то есть вJavascriptнаписать внутриXML,потому чтоJSXЭто свойство , поэтому он имеетJavascriptгибкость и одновременноhtmlСемантический и интуитивно понятный

Зачем использовать JSX с Vue

Иногда мы используем функцию рендеринга (render function) В абстрактные компоненты, функция рендеринга не очень понятна, чтобы увидетьофициальная документация, а функции рендеринга иногда очень больно писать, например:

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

Соответствующий шаблон выглядит следующим образом:

<anchored-heading :level="1">
  <span>Hello</span> world!
</anchored-heading>

Это явно неблагодарно, на этот раз отправитьJSXИграл. существуетVueиспользуется вJSX, Необходимо использоватьBabel плагинЭто позволяет обратно ближе к синтаксису шаблона, а затем начнем начатьVueНапишитеJSXБар

Начинать

Использование для быстрого чтенияvue-cliСоздать проект Vue:

# 直接回车即可
vue create vue-jsx

Установите зависимости:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

настроить.babelrc:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@vue/babel-preset-jsx'
  ]
}


Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.) 


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@vue/babel-preset-jsx',
      {
        'injectH': false
      }]
  ]
}

Вот какVueНапишите базовое содержимое в , включая обычный текст, динамическое содержимое, использование тегов и использование пользовательских компонентов, которые аналогичны однофайловым компонентам, которые мы обычно используем, как показано ниже:

Уведомление:JSXВерхний слой может иметь только один корневой элемент

render() {
  return (
    <div>
      <h3>内容</h3>
      {/* 纯文本 */}
      <p>hello, I am Gopal</p>
      {/* 动态内容 */}
      <p>hello { this.msg }</p>
      {/* 输入框 */}
      <input />
      {/* 自定义组件 */}
      <myComponent></myComponent>
    </div>
  );
}

Attributes/Props

стабильныйAttributesСвязывание с обычнымHTML Attributesта же структура

render() {
  return <div><input placeholder="111" /></div>
}

Обратите внимание, что если свойство является динамическим, передv-bind:placeholder="this.placeholderText"сталplaceholder={this.placeholderText},Следующим образом

render() {
  return <input
            type="email"
            placeholder={this.placeholderText}
          />
}


render (createElement) {
    return (
        <button {...this.largeProps}></button>
    )
}

картинаinputтег, вы можете привязывать свойства в пакетах следующим образом

const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
};
render() {
  return <input {...{ attrs: inputAttrs }} /> 
}

слот

Для ознакомления со слотами см. мою другую статью[Vue Advanced] От слота до компонента без рендеринга

Мы смотрим, как использоватьJSXРеализация именованных слотов и слотов с ограниченной областью действия

именованный слот: Аналогичная формулировка и родительский компонент шаблона однофайловой сборки отslot="header"这样方式指定要插入的位置。 дочерний компонент через{this.$slots.header}способ указать имя слота, гдеheaderЭто имя слота, родительский и дочерний компоненты нуждаются во взаимно однозначном соответствии.

Примечание: здесь нельзя использоватьv-slotинструкция

Родительский компонент:

render() {
  {/* 具名插槽  */}
  <myComponent>
    <header slot="header">header</header>
    <header slot="content">content</header>
    <footer slot="footer">footer</footer>
  </myComponent>
}

Сборка:

render() {
  return (
    <div>
      {/* 纯文本 */}
      <p>我是自定义组件</p>
      {this.$slots.header}
      {this.$slots.content}
      {this.$slots.footer}
    </div>
  );
}

слот с прицелом: передается в дочерний компонент{this.$scopedSlots.test({ user: this.user })}Имя указанного слотаtest, и воляuserпередается на родительский компонент. Когда родительский компонент записывает метку дочерней компоненты, пропуститеscopedSlotsЗначение, указывающее, куда вставитьtestи получить входящий подкомпонент в функции обратного вызоваuserстоимость

Примечание. Слоты с заданной областью записываются в тегах подкомпонентов, как и свойства. вместо того, чтобы помещать его внутри метки, как именованный слот

Родительский компонент:

render() {
  {/* 具名插槽 作用域插槽 */}
  <myComponent {
    ...{
      scopedSlots: {
        test: ({user}) => (
          <div>{user.name}</div>
        )
      }
    }
  }>
  </myComponent>
}

Сборка:

render() {
  return (
    <div>
      {this.$scopedSlots.test({
        user: this.user
      })}
    </div>
  );
}

инструкция

render() {
  {/* 指令 */}
  {/* v-model */}
  <div><input vModel={this.newTodoText} /></div>
  {/* v-model 以及修饰符 */}
  <div><input vModel_trim={this.tirmData} /></div>
  {/* v-on 监听事件 */}
  <div><input vOn:input={this.inputText} /></div>
  {/* v-on 监听事件以及修饰符 */}
  <div><input vOn:click_stop_prevent={this.inputText} /></div>
  {/* v-html */}
  <p domPropsInnerHTML={html} />
}

Описание официального сайта, создать новыйFunctionalComponent.jsфайл со следующим содержимым:

export default ({ props }) => <p>hello {props.message}</p>

Родительский компонент вызывается следующим образом:

import funComponent from './FunctionalComponent'

...

render() {
  return {/* 函数式组件 */}
        <funComponent message="Gopal"></funComponent>
}

Суммировать

В этой статье в основном рассказывается, почемуVueиспользуется вJSX, и какVueиспользуется вJSX

Все примеры из этой статьи здесьгитхаб-адрес, так разбито сердце, попроси комплимент~

В целом, вVue 2.Xверсия, написанная наJSXЭто немного неблагодарно, и я наступлю на много ям .... С нетерпением ждуVue3

Надеюсь, это поможет всем~

Ссылаться на

Babel Preset JSX

Официальная документация Vue

Научитесь использовать Vue jsx, автомобиль твой лаоганма

Как использовать JSX с Vue и зачем его использовать

Категории