在 vue 2 中,通过 this.props 对象获取 props 数据。1. 定义 props:在组件的 props 选项中声明要接收的 prop。2. 获取 props:通过 this.props 对象访问传递的 prop 数据。3. 使用 props:获取 prop 数据后,就可以在组件的其余部分使用它们。
Vue 2 中获取 Props 数据
如何获取 Props 数据?
在 Vue 2 中,获取 Props 数据可以通过 this.props 对象实现。
示例:
立即学习“前端免费学习笔记(深入)”;
export default {
props: ['propName'],
data() {
return {
message: this.props.propName // 获取名为 'propName' 的 prop
}
}
}
详细说明:
- 定义 Props:
在组件的 props 选项中声明要接收的 Prop。Prop 是一个由父组件传递给子组件的数据属性。
- 获取 Props:
通过 this.props 对象可以访问传递的 Prop 数据。this.props 是一个只读对象,包含所有定义的 Prop。
- 使用 Props:
获取 Prop 数据后,就可以在组件的其余部分使用它们。例如,可以在 data 中存储它们,或在模板中使用它们。
注意:
- Prop 必须在组件的 props 选项中显式声明,否则无法通过 this.props 获取。
- Prop 是只读的,不能被子组件修改。
- 如果父组件没有提供 Prop,则 this.props 中对应 Prop 的值将为 undefined。