时间戳

首页 > 解决方案 > Vue中如何区分prop和同名的方法？

reactjs - Vue中如何区分prop和同名的方法？

问题描述

我最近从 React 切换到了 Vue。在 React 中，我经常在子组件中有一个方法，看起来像这样：

onClick = (e)=>{
    const val = e.target.value;
    this.props.onClick(val)
  }

我看到 Vue 非常“自由”，并且允许您将组件方法和道具视为“同一件事”。

有什么方法可以区分这两者，比如 this.props？关于这个问题的约定是什么？

标签： reactjsvue.js

解决方案

您应该利用另一种 Vue 技术，而不是使用其事件发射器系统传递函数：

// MyComponent:
methods: {
    onClick(e) {
        const val = e.target.value;
        this.emit('click', val);
    }
}
...
<button @click="onClick">Click me</button>


//When you actually use your component

<MyComponent @click="() => { console.log('delegated onClick!'); }"/>

推荐阅读