共事们在我的疯狂安利之下, 纷纷把 vue3 component 用起来了. 明天又出问题了

“ 这参数怎么传不进去啊?”

import {createApp, h} from 'vue'

const A = {
  props: {key: String},
  name: 'A',
  setup: (props, ctx) => {return () => h('div', props.key)
  }
}

const B = {setup: (props, ctx) => {return () => h(A, {key: 'hello'})
  }
}

createApp(B)
  .mount('#app')

哦, 我一看也傻了, 没道理啊, 查了半天材料, 原来 key 是非凡属性, 不能自定义, 改成别的名字就行了.

那么, 还有哪些非凡属性? 它们都有什么用呢?

key

key 示意的是在界面更新时一个组件是不是会从新 mount, 如果 key 不变, 则不会, key 变了, 则会.

看上面这个淡入淡出动画的例子:

import {createApp, h, ref, Transition} from 'vue'

const A = {
  props: {text: String},
  name: 'A',
  setup: (props, ctx) => {return () => h('div', props.text)
  }
}

const B = {setup: (props, ctx) => {const text = ref('hello')

    return () => [
      h(
        Transition,
        {
          name: 'fade',
          mode: 'out-in'
        },
        h(
          A,
          {
            text: text.value,
            key: text.value // 如果 key 设置成固定的值, 则不会触发 transition 动画
          }
        )
      ),
      h(
        'input',
        {onInput: (e) => text.value = e.target.value
        }
      )
    ]
  }
}

createApp(B)
  .mount('#app')

ref

ref 用于把以后元素的索引保留到某个地位, 以让在其它中央能够被调用.

import {createApp, h, ref, Transition} from 'vue'

const A = {setup: (props, ctx) => {const input = ref(null)

    return () => [
      h(
        'input',
        {ref: input}
      ),
      h(
        'button',
        {onClick: () => input.value.value = ''},' 清空 '
      )
    ]
  }
}

createApp(A)
  .mount('#app')

is

is 用于在模板中在一个中央应用不同的 component. 因为咱们还没学会模板的语法, 在 render function 里能够这样代替:

import {createApp, h, ref} from 'vue'

const C1 = {setup: () => {return () => h(
      'h1',
      'from C1'
    )
  }
}

const C2 = {setup: () => {return () => h(
      'h2',
      'from C2'
    )
  }
}

const A = {setup: (props, ctx) => {const currentComponent = ref(C1)

    return () => [
      h(currentComponent.value),
      h(
        'button',
        {onClick: () => currentComponent.value = C2
        },
        'TO C2'
      )
    ]
  }
}

createApp(A)
  .mount('#app')

以上就是 Vue3 里的非凡属性.