Vue3-Props特性

最新推荐文章于 2024-03-24 11:11:16 发布

monana6

最新推荐文章于 2024-03-24 11:11:16 发布

阅读量303

点赞数

分类专栏： Vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Wu_whiteHyacinth/article/details/129866034

版权

Vue3 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中Props的使用，包括如何声明Props、单向数据流的概念以及Props的校验方法。Props允许父组件向子组件传递数据，遵循单向绑定原则，不应在子组件内修改。当需要改变Prop或处理Prop值时，推荐使用局部数据属性或计算属性。同时，文章展示了Props的校验方式，如类型检查、默认值和自定义验证函数。

摘要由CSDN通过智能技术生成

Props特性

允许组件的使用者在外部传递，实现各种各样的功能

Props的声明

看官网介绍很详细

Props | Vue.js (vuejs.org)

TypeScript 与组合式 API | Vue.js (vuejs.org)

单向数据流

（1）所有的Props都遵循单项绑定的原则，props会因父组件的更新而变化，自然的向下流往子组件，但是不会逆向传递。

（2）每次父组件更新后，所有子组件中的props都会被更新到最新值，这意味着不该在子组件中去更改一个prop，否则会跑出警告、

导致你想要更改一个子组件prop 的需求通常来源于以下两种场景：

1) 子组件想要更改父组件传递过来的值，这种情况下最好重新定一个局部数据属性，从props上获取初始值即可

const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)

2)需要对传入的prop值做进一步的转换。在这种情况下，最好是基于该prop值定义一个计算属性。

const props = defineProps(['size']);
// 该 prop 变更时计算属性也会自动更新
const normalizadSize = computed(() => {
  props.size.trim().toLowerCase()
})

Props校验

Vue组件可以更细致的声明对传入Props的校验要求。

例如：

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个
    // 工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})