从子组件访问父组件的作用域里数据
在许多情况下，我们试图解决的问题是访问来自不同作用域的数据。
父组件有一个作用域，子组件有另一个作用域。
通常，我们希望从父组件访问子组件中的值，或者从子组件访问父组件中的值。Vue阻止我们直接这样做，这是一件好事。
它使我们的组件更加具有封装性，并提高了它们的可重用性。这使我们的代码更简洁，并从长远来看避免了许多令人头痛的问题。
但是有时候我们可能会试图通过函数来绕过这个问题。
从父类获取值
如果希望子组件访问父组件的方法，那么将方法直接作为 prop 传递似乎简单明了。
在父组件中我们会这样做：
<!-- Parent -->
<template>
<ChildComponent :method="parentMethod" />
</template>// Parent
export default {
methods: {
parentMethod() {
// ...
}
}
}
在我们的子组件中，使用传入的方法：
这样做会有什么问题？
这并不是完全错误的，但是在这种情况下使用事件会更好。
然后，当需要时，子组件不会调用该函数，而只是发出一个事件。然后父组件将接收该事件，调用该函数，拼装将更新传递给子组件的 prop。
这是达到同样效果的更好的方法。
在其他情况下，我们可能想要从子元素中获取一个值到父元素中，我们为此使用了函数。
例如，你可能正在这样做。父函数接受子函数的值并对其进行处理：
<!-- Parent -->
<template>
<ChildComponent :method="parentMethod" />
</template>
// Parent
export default {
methods: {
parentMethod(valueFromChild) {
// Do something with the value
console.log('From the child:', valueFromChild);
}
}
}在子组件中调用传入的方法并将子组件的值作为方法的参数传入：
// Child
export default {
props: {
method: { type: Function },
},
data() {
return { value: 'I am the child.' };
},
mounted() {
// Pass a value to the parent through the function
this.method(this.value);
}
}这也不是完全错误的，这样做是可行的。
只是这不是在Vue中的最佳方式。相反，事件更适合解决这个问题。我们可以使用事件来实现完全相同的事情
<!-- Parent -->
<template>
<ChildComponent @send-message="handleSendMessage" />
</template>// Parent
export default {
methods: {
handleSendMessage(event, value) {
