我們知道,在 jsx 中可以這樣為 props 賦值const props = {
a: 1,
b: 1,}render() {
return (
<MyComponent {...props} />
)}在 vue 中,雖然我能夠這樣做<template><my-comp :some-props="props"></my-comp></template>// ...data() { return { props: { a: 1, b: 1,
},
},
},但和上述的區(qū)別在于,這樣 my-comp 其實只接收了一個 some-props 的 prop, (一個對象屬性),而不是像 jsx 那樣,獲得了 a,b 兩個 prop (值展開的屬性)。對象屬性和展開屬性的區(qū)別在于,前者不方便做 props 驗證。如果我想實現(xiàn)和 jsx 一樣的效果,我就要這樣寫<template><my-comp :a="props.a" :b="props.b"></my-comp></template>// ...data() { return { props: { a: 1, b: 1,
},
},
},這樣寫超級煩,因為經(jīng)常要寫好多 prop。那么問題來了,請問在 vue 中是否可以實現(xiàn) jsx 中那樣的簡寫呢?
vue template 如何模擬 jsx 中的解構(gòu) props 特性
絕地?zé)o雙
2018-11-24 14:15:45