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一样，不要严格采用OOP思维方式。

在您的示例中，我看不到任何数据定义或道具定义。

您的视图组件“ post.vue”是根/父类，在其中您要导入Button组件，因此它是“ post.vue”的子代。没什么好想的。

也许此链接可以为您提供更多帮助：https://forum.vuejs.org/t/how-can-i-make-oop-user-interfaces/10512/7

请帮助我了解Vue中道具的使用

1 个答案: