JSX 在 Vue 上传播属性答案

【问题标题】：JSX Spread Attributes on VueJSX 在 Vue 上传播属性
【发布时间】：2019-08-07 05:13:17
【问题描述】：

我正在尝试在 Vue 组件上使用 JSX 传播属性，如下所示。

<script>

const
Square = p => <button class="square" v-on:click={ () => p.props.click( p.props.index ) }>{ p.props.squares[ p.props.index ] }</button>

const
Board = p => (
    <div>
        <Square squares={ p.props.squares } click={ p.props.click } index='0' />
        <Square { ...p.props } index='1' />
    </div>
)

export default {
    data    : () => ( { squares: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ] } )
,   render  ( h )   { return <Board squares={ this.squares } click={ this.handleClick } /> }
,   methods : {
        handleClick: i => console.log( i )
    }
}
</script>

这行没问题：

<Square squares={ p.props.squares } click={ p.props.click } index='0' />

但这条线似乎无法将属性从“Board”传递到“Square”

<Square { ...p.props } index='1' />

请帮助我。提前致谢。

【问题讨论】：

出身react，一直不明白传播props的价值。即使使用流/打字稿，您仍然必须挖掘以找出实际传递的内容以及碰撞的位置。但是为了回答你的问题，vue 使用 babel 糖语法来绑定属性。您不能在 SFC 上传播它们，但可以使用 render components。
感谢您的建议。我将我的代码移动到项目的 js 部分，但仍然找不到任何胶水。我会更加努力。谢谢！

标签： javascript vue.js attributes jsx spread-syntax

【解决方案1】：

也许你可以这样做

<Square { ...{props: p.props} } index='1' />

看了https://github.com/vuejs/jsx#attributesprops，觉得可以。

【讨论】：