Vue3
Vue初步学习
Vue组件学习及Prop传递数据
Vue自定义事件组件交互
组件的生命周期
Vue引入第三方
Axios网络请求
Vue路由配置
Vue状态管理(Vuex)
Vue新特性-组合式API
Vue3加载Element-plus
Vue3管理项目
Vue3项目部署到服务器过程
nodejs安装
本文档使用 MrDoc 发布
-
+
up
down
首页
Vue组件学习及Prop传递数据
## Vue组件 ### 单文件组件 Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的 **模板(html)、逻辑(js)与样式(css)** 封装在单个文件中。下面是一个单文件组件的示例: ```html <script> export default { data() { return { greeting: 'Hello World!' } } } </script> <template> <p class="greeting">{{ greeting }}</p> </template> <!-- scoped: 如果在style中添加此属性,就代表当前样式只在当前组件中生效 --> <style scoped> .greeting { color: red; font-weight: bold; } </style> ``` ### 组件的组织  组件中可以引用其他组件。 ## Props组件交互 组件与组件之间存在交互,如数据等的交互。 Prop可以在组件上注册的一些自定义attributes props 需要使用 props 选项来定义: ```js export default { props: ['foo'], created() { // props 会暴露到 `this` 上 console.log(this.foo) } } ``` 除了使用字符串数组来声明 prop 外,还可以使用对象的形式: ```js export default { props: { title: { type: String, default: "" } } } ``` 任何类型的值都可以作为props的值被传入到子组件中。 父组件中直接通过: ```html <MyComponent :title="标题名由父组件传到子组件中"> ``` ### 传递不同的值类型# 在上述的两个例子中,我们只传入了字符串值,但实际上任何类型的值都可以作为 props 的值被传递。 ``` props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function } ``` #### Number ``` <!-- 虽然 `42` 是个常量,我们还是需要使用 v-bind --> <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 --> <BlogPost :likes="42" /> <!-- 根据一个变量的值动态传入 --> <BlogPost :likes="post.likes" /> ``` #### Boolean ``` <!-- 仅写上 prop 但不传值,会隐式转换为 `true` --> <BlogPost is-published /> <!-- 虽然 `false` 是静态的值,我们还是需要使用 v-bind --> <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 --> <BlogPost :is-published="false" /> <!-- 根据一个变量的值动态传入 --> <BlogPost :is-published="post.isPublished" /> ``` #### Array ``` <!-- 虽然这个数组是个常量,我们还是需要使用 v-bind --> <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 --> <BlogPost :comment-ids="[234, 266, 273]" /> <!-- 根据一个变量的值动态传入 --> <BlogPost :comment-ids="post.commentIds" /> ``` #### Object ``` <!-- 虽然这个对象字面量是个常量,我们还是需要使用 v-bind --> <!-- 因为这是一个 JavaScript 表达式而不是一个字符串 --> <BlogPost :author="{ name: 'Veronica', company: 'Veridian Dynamics' }" /> <!-- 根据一个变量的值动态传入 --> <BlogPost :author="post.author" /> ``` #### 使用一个对象绑定多个 prop 如果你想要将一个对象的所有属性都当作 props 传入,你可以使用没有参数的 v-bind,即只使用 v-bind 而非 :prop-name。例如,这里有一个 post 对象: ```js export default { data() { return { post: { id: 1, title: 'My Journey with Vue' } } } } ``` 以及下面的模板: `<BlogPost v-bind:post="post" />` 而这实际上等价于: `<BlogPost :id="post.id" :title="post.title" />` ### 单向数据流 所有的props都遵循**单向绑定**的原则,props因父组件的更新而变化,自然地将新的状态向下流到子组件,而不会逆向传递。 > d 子组件中不应更改一个prop,否则vue会报错 ```js export default { props: ['foo'], created() { // ❌ 警告!prop 是只读的! this.foo = 'bar' } } ``` **那如何才能更改呢?** - 通常prop被用于传入初始值;而子组件想在之后将其作为一个局部数据属性,最好新定义一个,从props上获取初始值即可。例如: ```js export default { props: ['foo'], data(){ return{ newFoo: this.foo } } } ``` - 需要对传入的prop值做进一步的转换,最好是基于该prop值定义一个计算属性。例如: ```js export default { props: ['size'], computed: { // 该 prop 变更时计算属性也会自动更新 normalizedSize(){ return this.size.trim().toLowerCase() } } data(){ return{ newFoo: this.foo } } } ``` ### Prop校验 我们上面已经看到过的类型声明,如果传入的值不满足类型要求,Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。 要声明对 props 的校验,你可以向 props 选项提供一个带有 props 校验选项的对象,例如: ```js export default { props: { // 基础类型检查 //(给出 `null` 和 `undefined` 值则会跳过任何类型检查) propA: Number, // 多种可能的类型 propB: [String, Number], // 必传,且为 String 类型 propC: { type: String, required: true }, // Number 类型的默认值 propD: { type: Number, default: 100 }, // 对象类型的默认值 propE: { type: Object, // 对象或者数组应当用工厂函数返回。 // 工厂函数会收到组件所接收的原始 props // 作为参数 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' } } } } ```
laihui126
2022年9月14日 14:20
分享文档
收藏文档
上一篇
下一篇
微信扫一扫
复制链接
手机扫一扫进行分享
复制链接
关于 MrDoc
觅道文档MrDoc
是
州的先生
开发并开源的在线文档系统,其适合作为个人和小型团队的云笔记、文档和知识库管理工具。
如果觅道文档给你或你的团队带来了帮助,欢迎对作者进行一些打赏捐助,这将有力支持作者持续投入精力更新和维护觅道文档,感谢你的捐助!
>>>捐助鸣谢列表
微信
支付宝
QQ
PayPal
下载Markdown文件
分享
链接
类型
密码
更新密码