Vue – JSX (with hd code)

After writing react JSX, go back to vue JSX to avoid confusion.

Class and style

I have an object in curly braces, so it’s pretty straightforward

render () {
  return (
    <div
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px'}}} / >)Copy the code

domProps

The innerHTML href title, etc., the tag properties of the BOM environment need to be prefixed with domProps, right? It seems that the tag is ok without adding it.

render () {
  return (
    <Child
      domPropsInnerHTML="bar"
      title="I am the title"/ >)}Copy the code

The event

• Native event, corresponding to template syntax@click.native
• Custom events (pass'emit'Trigger)
• Event reference, callback

// Parent.vue
export default {
    render () {
      return (
        <div
          propsOnCustomEvent={this.customEventHandler}
          onClick={this.clickHandler}
          nativeOnClick={this.nativeClickHandler}
        >
        </div>)},methods: {
        nativeClickHandler () {
          console.log('nativeClickHandler') // Native events}}}Copy the code

// Child.vue
export default {
  props: {
    onCustomEvent: {}
  },
 
  render() {
    return (
      <div
        onClick={this.onClick}
      >autistic</div>)},methods: {
    onClick (e) {
      this.$emit('click'.'emit onClick') // Custom events
      this.onCustomEvent('i am a listener created by my parent') // Callback event}}},Copy the code

Slot Slot and slotScope

Slot slots need to be obtained and rendered using the $slots function of vNode. We found that the slot slots could not be rendered using the Component < Title />. (PS: If there is a better way, please leave a message.)

• Slot slot

// Parent.vue
render () {
  const Title = <h1 slot="title"> I'm title_slot < / h1 >return<Child titleSlot={Title} > // <Title /> // this cannot render!! <h1> I am default_slot</h1> </Child>)} // child.vuerender () {
  return (
    <div>
      { this.$attrs.titleSlot }
      { this.$slots.default }
    </div>
  )
}
Copy the code

• slotScope

Pass the scopeSlot rendering function to the child component to call

// Parent.vue
export default {
  data () {
    list: [{text: 'hello' },
      { text: 'world' },
      { text: '! ' },
    ]
  },
  render() {
    return (
      <div>
        {
          this.list.map(item => (
            <ListItem
              data={ item }
              {.{
                scopedSlots: {
                  default: ({ data}) = > {
                    return (
                      <div>{data}</div>)}}}} />))}</div>)}},Copy the code

// Child.vue
export default {
  props: {
    data: {}
  },
  render() {
    return (
      <div>
        {
          this.$scopedSlots.default({
            data: this.data
          })
        }
      </div>)}},Copy the code

Custom instruction

• v-show
  

  Direct support!!

• v-if
  

  Use the if-else ternary operator instead

  render () {
    if (b) {
      return <A />
    } else {
      return <B />
    }
  
    // return b ? <A /> : <B />
  }
  Copy the code

• v-model
  

  Go back to the way event bindings update values, or use this if you don’t want toThe official plug-in

• v-modifier
  

  Just throw in an official documentBecause I didn’t make up for it.

$attrs 与 $listeners

Propagating a bunch of properties in the intermediate component that are not declared as props to the lower component, but the intermediate component still needs to be manually bound

// Root.vue
<template>
  <div>
    <parent
      :root-value="rootValue"
      @change-root-value="changeRootValue"
    />
  </div>
</template>
export default {
  data () {
    return {
      rootValue: 'root'}},methods: {
    changeRootValue (val) {
      this.rootValue = val
    }
  }
}
Copy the code

// Parent.vue
// There is no declaration of props
render () {
  return (
    <Child
      {.{ attrs: this.$attrs }}
      {.{ on: this.$listeners}} / >)}Copy the code

// Child.vue
export default {
  render () {
    return (
      <div
        onClick={ this.onClick }
      >
        { this.$attrs.titleSlot }
        { this.$slots.default }
      </div>)},methods: {
    onClick () {
      this.$listeners['change-root-value'] ('child')}}}Copy the code

other

• key
• ref
• RefInFor (used when using list rendering)

Contrast rendering functions with JSX syntax, individual attributes with extended operators

When you look at the createElement and JSX syntax in the Render function a few times, you can see that there is a connection between the two. Can only understand, not words, feel together.

// createElement render function syntax
render (h) {
  return h('div', {
    attrs: {
      id: 'foo'
    },
    domProps: {
      innerHTML: 'bar'
    },
    on: {
      click: this.clickHandler
    },
    nativeOn: {
      click: this.nativeClickHandler
    }
  })
}
Copy the code

/ / JSX syntax
render () {
  // Is the following b the same as the second argument to createElement?
  const b = {
    attrs: this.$attrs,
    domProps: {
      innerHTML: 'innerHTML'
    },
    on: {
      click: this.clickHandler
    },
    nativeOn: {
      click: this.nativeClickHandler
    }
  }

  return (
    <div
      / / {... {... B}} // This line is equivalent to the following lines
      domPropsInnerHTML="bar"
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}
    />
  )
}
Copy the code

The resources

• The official documentation
• Vue JSX practice