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。
目录
相关文章
|
5天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
20 8
|
5天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
19天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
19天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
移动开发 JavaScript 小程序
Vue3 与 Vue2 的Props、全局组件的异同点
Vue3 Props Props 是任何现代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。 Vue3 中,在组件中访问Props的方式与 Vue2 会有所不同。
352 0
Vue3 与 Vue2 的Props、全局组件的异同点
|
12天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章
|
12天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
25 1
vue学习第九章(v-model)
|
12天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
27 1
vue学习第十章(组件开发)
|
18天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
18天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。