请帮助我理解Vue中道具的用法

Question

在过去的3天里，我一直在研究vue.js，使用的是一个vue cli 3测试项目。

我有一些面向对象编程的经验，但不是很多。尽管如此，vue的“通用”方法似乎对我来说很熟悉，这与我在OOP中已经看到的实践相呼应。

尽管如此，还是有很多事情困扰着我，其中之一就是道具。

我已经筛选了几个教程，包括视频和书面形式。下面是我最近读到的一篇短文，它很简短地说明了我所看到的情况：https://reactgo.com/vuejs-props-tutorial/

因此，据我所知，如果我们是在OOP中，道具是建立在我认为的父母身上的。在上面的教程中，作者创建了button.vue，其中声明了道具，然后将其导出到post.vue。在我看来，这使得button.vue成为post.vue的父类，因为post.vue继承自button.vue。然而，在泛型编程中，或者至少在vue中，反之亦然。现在所有的教程都将post.vue称为父级，因为它通过html指定道具的数据。

Post.vue

<template>
    <div>
        <h1>My first post</h1>
        <p>This a big post helps us to learn vue props</p>
        <my-button name="Share"></my-button>
        <my-button name="Like"></my-button>
        <my-button name="Comment"></my-button>
    </div>
</template>

<script>
    import Button from './Button.vue'

    export default{
        components:{
            'my-button':Button
        }
    }
</script>

当涉及到更复杂的组件时，这真的让我大吃一惊，在这些组件中，视图(使用路由的术语项目)由一个组件组成，该组件是通过相互构建的多个组件链制造的。如下所示: MyView->listBuilder->listData1

我真的很难理解vue的技术方面是如何在这里工作的。我可能会把它当作一个给定的东西，但我非常确定我很快就会遇到问题，因为构建在组件上的组件(等等)会尝试解析那些根本不存在的属性，因为组件相互继承的顺序都是错综复杂的。

构建彼此构建的长链组件可能不是一个很好的主意，但在某些时候可能会出现这样的需求，然后我想对vue处理这一问题的方式有一个很好的理解。

此外，我真的很想知道这种方法在vue/泛型编程中的优点。它让我想起了OOP中的接口，因为我可以在子组件中指定父组件必须处理的内容。

Answer 1

就像前面提到的artoju一样，不要严格遵循面向对象的思维模式。

在你的例子中，我没有看到任何数据定义或属性定义。

您的视图组件“Button”是根/父组件，在那里您正在导入您的post.vue组件，因此它是"post.vue“的子组件。没什么好想的。

也许这个链接可以帮到你更多：https://forum.vuejs.org/t/how-can-i-make-oop-user-interfaces/10512/7