Vue3之Props组件数据传递

简介: Vue3之Props组件数据传递

Vue3中props

在 Vue 3 中,props 的使用方式相比 Vue 2 有一些变化,特别是在 <script setup> 语法下的使用。下面是一些关于 Vue 3 中的 props 的基本用法和一些注意事项:

1. <script setup> 语法:

在 Vue 3 中引入了 <script setup> 语法糖,使得编写组件更加简洁。在 <script setup> 中,props 的使用方式有所改变。

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['prop1', 'prop2']);
</script>

<template>
  <div>
    {{ props.prop1 }}
    {{ props.prop2 }}
  </div>
</template>

在这个例子中,使用 defineProps 来声明组件的 propsprops 变量会自动解构为响应式对象。在模板中,直接使用 props 访问属性。

2. 按需引入:

如果你只需要部分 props,你可以通过传入一个数组或对象来按需引入。

<script setup>
import { defineProps } from 'vue';

const { prop1, prop2 } = defineProps(['prop1', 'prop2']);
</script>

<template>
  <div>
    {{ prop1 }}
    {{ prop2 }}
  </div>
</template>

或者:

<script setup>
import { defineProps } from 'vue';

const { prop1, prop2 } = defineProps({
  prop1: String,
  prop2: Number,
});
</script>

<template>
  <div>
    {{ prop1 }}
    {{ prop2 }}
  </div>
</template>

3. 类型验证:

你可以通过传递一个包含类型的对象来进行类型验证。

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  prop1: String,
  prop2: {
    type: Number,
    default: 42,
  },
});
</script>

<template>
  <div>
    {{ props.prop1 }}
    {{ props.prop2 }}
  </div>
</template>

4. 默认值:

你可以通过 default 选项为 props 设置默认值。

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  prop1: String,
  prop2: {
    type: Number,
    default: 42,
  },
});
</script>

<template>
  <div>
    {{ props.prop1 }}
    {{ props.prop2 }}
  </div>
</template>

5. 在 setup 中使用:

如果你选择不使用 <script setup> 语法,而是手动编写 setup 函数,props 的使用方式会有所不同。在这种情况下,你需要从 context 中解构 props

<script>
export default {
  props: {
    prop1: String,
    prop2: Number,
  },
  setup(props) {
    // 在 setup 函数中使用 props
    console.log(props.prop1);
    console.log(props.prop2);

    return {
      // 返回供模板使用的数据
    };
  },
};
</script>

<template>
  <!-- 模板内容 -->
</template>

单向数据流

props数据流是单向的,即自上而下的单向数据流。这意味着数据从父组件传递到子组件,但子组件不能直接修改父组件的数据。这种单向数据流的设计有助于代码的可维护性和可预测性。

单向数据流的特点:

  1. 父子组件关系: 数据流主要体现在父子组件之间。父组件通过 props 将数据传递给子组件。
  2. Props: 子组件通过 props 接收父组件传递的数据。props 是一种传递数据的方式,子组件不能直接修改 props 中的值。
  3. 事件: 子组件可以通过触发事件来通知父组件发生了某些事情。父组件通过监听子组件的事件来获知子组件的状态变化。
  4. **:子组件可以使用emit` 方法触发自定义事件,父组件可以通过监听这些事件来获取子组件的状态。
  5. Provide/Inject: Vue 提供了 provideinject 来实现祖先组件向后代组件传递数据的能力,但要谨慎使用,因为这会形成依赖关系。

注意

  1. <script setup> 中,defineProps 宏的参数只能包含 props 对象的键,且这些键必须与组件的 props 名称相匹配。直接在 defineProps 宏的参数中使用其他变量是不允许的。
<script setup>
const customVariable = 'Hello';

// 错误的用法
// const props = defineProps([customVariable]);
</script>

<template>
  <div>
    {{ customVariable }}
  </div>
</template>

上面的代码会导致错误,因为 defineProps 宏的参数应该是与组件的 props 名称一致的字符串数组。

  1. 所以prop默认都是可选的,除非定义了required:true,除了boolean类型的prop,没穿默认是undefined,boolean类型的prop没传默认会是false。
目录
相关文章
|
1天前
Vue3 中使用 Event Bus
【10月更文挑战第16天】Event Bus 是 Vue3 中一种简单而实用的通信方式,在一些简单的场景中可以发挥重要作用。但在实际应用中,要根据项目的具体需求和复杂度,选择合适的通信方式,以实现最佳的性能和可维护性。同时,要遵循最佳实践,合理使用 Event Bus,避免出现问题。
10 5
|
1天前
|
前端开发 UED
vue3知识点:Suspense组件
vue3知识点:Suspense组件
11 4
|
1天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
10 2
|
1天前
|
Java
vue3知识点:Teleport组件
vue3知识点:Teleport组件
10 1
|
2天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
15 2
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
79 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
|
JavaScript
vue 组件传值
vue 组件传值
79 0
|
JavaScript
vue父子组件传值
vue父子组件传值