疯狂的 Vue3 之 特殊属性

同事们在我的疯狂安利之下, 纷纷把 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 里的特殊属性.