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