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