javascript - JSX Spread Attributes on Vue
问题描述
I'm trying to use JSX Spread Attributes on Vue component like below.
<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>
This line is OK:
<Square squares={ p.props.squares } click={ p.props.click } index='0' />
But this line seems to fail to pass properties from 'Board' to 'Square'
<Square { ...p.props } index='1' />
Please help me. Thanks in advance.
解决方案
也许你可以这样做
<Square { ...{props: p.props} } index='1' />
阅读https://github.com/vuejs/jsx#attributesprops后,我认为它可以工作。
推荐阅读
- java - 我需要在它们的 Y 轴上移动两个形状,我该怎么做?
- swift - 使 BlockOperation 失败,以便其他依赖项不执行
- c# - LINQ MAX 在空结果时给出异常
- apache-spark - 在 pyspark 的 2 个时间戳列中选择更大的值
- mysql - 带有 mysql 和 stdin 的 Ansible 命令失败
- c++ - 在 CLI/C++ 中限制 API 调用的运行时间
- android - 无法解决:com.google.firebase:firebase-core:17.2.0
- apache-flink - Flink 中并行与多应用的区别
- c# - C#:当它被声明为对象时,如何创建一个具有泛型的实例
- c# - 将 Windows 服务移植到 .NET 核心