vue.js - 请帮我理解 Vue 中 props 的使用

问题描述

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

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

尽管如此，还是有很多事情让我难以置信，其中之一就是道具。

我已经筛选了几个教程，包括视频和书面形式。这是我最近读过的一篇很短的文章，它说明了我认为它很短而且很好的情况：https ://reactgo.com/vuejs-props-tutorial/

所以，据我了解，如果我们在 OOP 中，我会认为道具是建立在我认为是父母的地方。在上面的教程中，作者在声明 props 的地方创建了 button.vue，然后导出到 post.vue。在我看来，这使得 button.vue 成为 post.vue 的父级，因为 post.vue 继承自 button.vue。但是，在通用编程或至少在 vue 中，反之亦然 Oo ALL 教程现在（将）调用 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 中的接口，因为我可以在子组件中指定父组件必须使用的内容。

标签： vue.js

vue.js - 请帮我理解 Vue 中 props 的使用

问题描述

解决方案

推荐阅读