Vue.js中使用道具方法demo

2022-12-14 06:03

短信预约 -IT技能 免费直播动态提醒

正文

在SPA中使用组件的局限性之一是你不能直接将数据从一个组件传递给另一个。基于组件的应用程序背后的想法是，每个组件都被封装起来，并拥有它所需要的所有数据，以便工作；但有时，我们确实需要一个不同组件之间的沟通渠道。

这就是Vue.js道具的作用--它们允许你将任何类型的数据从父组件传递给子组件。与React的props工作方式类似，这可以通过在子组件上设置prop属性，并从父组件中传入所需的数据来实现。这个过程实际上是非常简单的，但如果你以前没有使用过Vue.js，还是会有点困惑的。

在这篇文章中，我们将看看如何在Vue.js中使用props，以及使用它们的一些好处。让我们开始吧!

什么是Vue.js中的props？

Props是你可以在一个子组件上设置的属性，以便以从上到下的方式传递数据。在Vue项目中，props是单向的：它们只从父组件向子组件发送数据。这意味着父组件负责设置道具，而子组件只负责接收道具。

道具也是反应式的：当父组件更新一个道具时，它也会自动在子组件上更新。这可能非常有用，因为它意味着你不必担心让两个组件保持同步--它们总是自动更新。

那么，你为什么要使用props呢？

如果你已经使用过任何其他基于组件的框架，如Angular或React，你可能已经理解了父子沟通的需要。然而，如果你对这个概念不是很熟悉的话，有几个原因可以说明你为什么要在Vue.js中使用props。

道具允许你保持你的组件的模块化和可重复使用。
它们使你在应用程序的不同部分之间分享数据变得容易。
在Vue.js中，props是一种将反应式数据从父组件传递到子组件的简单方法，有效地同步了它们。

如何在Vue.js中使用props？

我们已经说服了你对props的需求吗？让我们开始使用它们吧在第一个例子中，我们将看看如何使用传统的Options API来设置props，这也是大多数生产项目中仍在使用的。在文章的后面，我们将看到如何用新的、闪亮的Composition API完成同样的过程。

在Vue.js中使用道具其实很简单：你只需要在子组件上设置道具属性，并将你想要接收的数据以字符串的形式传入。

例如，假设我们有一个叫做App的父组件，它渲染了一个叫做Child的子组件。我们想把一条信息从App 传给Child，这样Child 就可以显示它。为了做到这一点，我们首先要在Child上设置 "消息 "道具，然后我们可以通过使用handlebars语法在我们的HTML中输出它。

<!-- This is our child component -->
<script>
  export default {
    props: ['message']
  }
</script>
<template>
  <p>This is my message: {{message}}</p>
</template>

然后，我们在App 组件中使用v-bind属性，添加实际的道具。作为缩写，我们可以直接使用": "符号。

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" />
</template>
<script>
  export default {
    data() {
      return {
        message: "Hello World"
      }
    }
  }
</script>

这将直接把信息从App传达给Child，有效地输出以下文本。

This is my message: Hello World

如果我们想传递多个道具，过程非常相似：我们只需要在子组件中把它们设置成一个数组，像这样。

<!-- This is our child component -->
<script>
  export default {
    props: ['message', 'name']
  }
</script>
<template>
  <p>{{message}}, {{name}}</p>
</template>

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" :name="name" />
</template>
<script>
  export default {
    data() {
      return {
        message: "Welcome",
        name: "Alex"
      }
    }
  }
</script>

这将输出以下结果。

Welcome, Alex

这就是它的全部内容了!使用Options API设置道具是非常简单和直接的。

在Vue中使用props与Composition API

现在让我们看看同样的过程在Composition API中是怎样的。你会很快注意到，HTML方面的东西是完全一样的；我们只需要重写我们的JS代码，以适应基于组合的项目中的新的做事方式。

因此，我们的子组件最终会是这样的。

<!-- This is our child component -->
<script setup>
  defineProps(['message', 'name'])
</script>
<template>
  <p>{{message}}, {{name}}</p>
</template>

<!-- This is our parent component -->
<template>
  <ChildComponent :message="message" :name="name" />
</template>
<script setup>
import { ref } from "vue";
const message = ref("Welcome");
const name = ref("Alex");
</script>