vue2的props用法

在Vue2中，props的用法有两种方式来声明。一种是以对象形式声明，另一种是以字符串数组来声明。

1. 以对象形式声明props：

   export default {
     props: {
       title: String,
       likes: Number
     }
   }

这种方式需要在组件内部显式声明props的属性名和类型，Vue会根据声明的属性名来匹配外部传入的props。在上述例子中，title的类型是String，likes的类型是Number。

2. 以字符串数组来声明props：

   export default {
     props: ['foo'],
     created() {
       console.log(this.foo)
     }
   }

这种方式直接将props的属性名以字符串的形式放在数组中，Vue会将外部传入的props赋值给组件实例的相应属性。在上述例子中，foo是props的属性名，可以通过this.foo来访问外部传入的props的值。

相关问题

vue2 props 默认值

在Vue.js框架中，props是父组件向子组件传递数据的一种方式。Vue2允许你为props设置默认值，以便在父组件没有提供该属性或者传递了undefined时使用。设置默认值的方法是在子组件的props选项中提供一个默认对象。如果props是数组形式，则每个属性的默认值需要在子组件的data函数中返回的默认对象里单独设置。如果props是对象形式，则可以像定义data函数那样直接在组件的props选项内定义默认值。

下面是一个设置默认值的例子：

Vue.component('child-component', {
  props: {
    // 基本类型设置默认值
    message: {
      type: String,
      default: 'Hello Vue!'
    },
    // 对象类型设置默认值
    options: {
      type: Object,
      default: function () {
        return { color: 'blue' };
      }
    }
  },
  // ...
});

在上面的示例中，`message` 属性将有一个字符串类型的默认值 "Hello Vue!"，而`options` 属性将默认返回一个包含 `{ color: 'blue' }` 的对象。注意，对于对象类型，我们不能直接写对象字面量作为默认值，而是需要提供一个函数来返回对象，这是因为每个组件实例应该拥有自己的属性副本以避免数据共享。

vue2props传参

在Vue.js 2.x版本中，`props`是“属性”（Properties）的缩写，它用于从父组件向子组件传递数据。当你需要在子组件中使用父组件的数据时，可以将它们作为props声明并接收。这里是一个基本的用法示例：

// 父组件 (Parent.vue)
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from the parent!'
    }
  }
}
</script>

// 子组件 (ChildComponent.vue)
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    // 使用冒号(:)指定这是一个prop
    message: {
      // 类型校验（可选）
      type: String,
      // 默认值（可选）
      default: ''
    }
  }
}
</script>

在这个例子中，`parentMessage`是父组件的数据，通过`:message`绑定到子组件的`message` prop上。当子组件接收到这个prop后，就可以在模板内直接使用`{{ message }}`显示数据。