React

属性展开

如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：

function App1() {return <Greeting firstName="Ben" lastName="Hector" />;
}function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};return <Greeting {...props} />;
}

你还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。

const Button = props => {const { kind, ...other } = props;const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";return <button className={className} {...other} />;
};const App = () => {return (<div><Button kind="primary" onClick={() => console.log("clicked!")}>Hello World!</Button></div>);
};

在上述例子中，kind 的 prop 会被安全的保留，它将不会被传递给 DOM 中的 <button> 元素。所有其他的 props 会通过 ...other 对象传递，使得这个组件的应用可以非常灵活。你可以看到它传递了一个 onClick 和 children 属性。

属性展开在某些情况下很有用，但是也很容易将不必要的 props 传递给不相关的组件，或者将无效的 HTML 属性传递给 DOM。我们建议谨慎的使用该语法。

Vue

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

data() {return {objectOfAttrs: {id: 'container',class: 'wrapper'}}
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

<div v-bind="objectOfAttrs"></div>

要升级最新版的 vue3 才支持 v-bind 的这种场景。