vue【详解】props —— 子组件接收父组件传入的参数

简介: vue【详解】props —— 子组件接收父组件传入的参数

用于接收父组件传入的参数

简易版——数组的方式定义

props: ['size', 'myMessage']

详细版——对象的方式定义

props: {
    // 限定参数的数据类型必须为字符串
    code: String,  
    // 限定参数的类型为字符串型,或数值型 Number
    params2: [String, Number],
    name:{
        type:String,
        // 限定必传
        required: true,
        // 指定默认值
        default:'朝阳'
    },
    age: {
      //自定义校验函数     
      validator: function (value) {
        return value >= 0
      }
    Info: {
         // 限定参数的数据类型必须为对象
        type: Object,
        // 默认值为对象/数组时,需使用工厂函数返回
        default: () => {
            return {
                name: "朝阳",
                age: 30
            }
        }
    },
},
  • type:用于限定传入参数的数据类型,可以是下列原生构造函数中的一种:StringNumberBooleanArrayObjectDateFunctionSymbol、任何自定义构造函数、或上述内容组成的数组。
  • default:用于指定一个默认值。如果没有传入参数,则使用默认值。对象或数组的默认值必须从一个工厂函数返回。
  • required:定义参数是否必传,值的数据类型为Boolean
  • validator:自定义验证函数用于对传入的参数添加个性化的限制,值的数据类型为Function,函数的参数为对应传入的参数值。
目录
相关文章
|
2月前
|
JavaScript API
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件,包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
43 0
|
14天前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
21天前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
29天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
800 2
|
移动开发 JavaScript 小程序
Vue3 与 Vue2 的Props、全局组件的异同点
Vue3 Props Props 是任何现代 JS 框架的重要组成部分。在组件之间传递数据的能力是Vue项目的基本要素。 Vue3 中,在组件中访问Props的方式与 Vue2 会有所不同。
349 0
Vue3 与 Vue2 的Props、全局组件的异同点
|
8天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
1天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
8天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
27 9
|
7天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。