Question

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

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

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

像this.props一样，有什么方法可以区分两者吗？关于这个问题有什么约定？

Answer 1

道具，数据，计算的属性和方法最终成为Vue实例上的属性-当组件被声明为a class时，成员还可能包括生命周期挂钩。与其他任何班级一样，他们的名字可能会发生冲突。

如果某些成员是私有的（Result方法）并且是公共API的一部分（onClick prop），则可以使用不同的名称，例如带有JS OOP中常见的下划线命名约定：

onClick

Vue style guide建议对私有财产使用命名约定。

Answer 2

如其中一条评论中所述，请尝试避免对道具，方法等使用重复的名称...

Answer 3

您应该利用另一种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!'); }"/>

如何在Vue中区分具有相同名称的prop和方法？

3 个答案: