vue props

最新推荐文章于 2025-07-14 00:11:30 发布

转载最新推荐文章于 2025-07-14 00:11:30 发布 · 5k 阅读

文章标签：

#vue props

本文详细介绍了Vue.js中组件间的通信方式，包括Props的基本使用、动态Props、Prop验证及非父子组件间的通信技巧。此外，还探讨了如何正确处理从父组件传递过来的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#props

用于接收来自父组件的数据（子组件期待获得的数据）

类型：字符串数组或者object

e.g.

数组：props: ['size', 'myMessage']
对象：
 props: {
    // 只检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

父组件：

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

子组件：

  // camelCase in JavaScript
  props: ['myMessage'],

#动态Prop

要动态地绑定父组件的数据到子模板的 props需要使用v-bind，这样每当父组件的数据变化时，该变化也会传导给子组件。

#字面量语法vs动态语法

父组件：

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

=右边是字符串”1”而不是number。如果想要传递一个number，需要使用v-bind，从而让它的值被当作js表达式计算

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。

Prop中的数据

1.prop 作为初始值传入后，子组件想把它当作局部数据来用；
定义一个局部变量，并用 prop 的值初始化它：

子组件：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2.prop 作为初始值传入，由子组件处理成其它数据输出。
定义一个计算属性，处理 prop 的值并返回。

子组件：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

#prop验证

子组件：

  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

注意 props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

#非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()


// 触发组件 A 中的事件
bus.$emit('id-selected', 1)


// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})