每日一学—vue prop属性

简介: prop可以像调用方法那样对组件进行传参,当需要给某一个组件传递prop参数时,这个prop就成为vue组件中的data()对象的一部分,可以直接在组件作用域内使用。组件可以支持多个(n个)prop属性变量,任意类型都可以传给对应的prop。

 📗 prop属性

prop可以像调用方法那样对组件进行传参,当需要给某一个组件传递prop参数时,这个prop就成为vue组件中的data()对象的一部分,可以直接在组件作用域内使用。

组件可以支持多个(n个)prop属性变量,任意类型都可以传给对应的prop。

📗 示例代码

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><scriptsrc="vue3.0.js"></script><title>Document</title></head><body><divid="app"><post-list></post-list></div><script>constvm=Vue.createApp({})
vm.component('PostList', {
data() {
return {
title: '你好gkd'                }
            },
components: {
// 面向对象思想: 声明类 {成员变量,成员函数 get() set()}PostItem: {
// props是子组件中的属性,:后边是props的属性值prop,prop可以有多个props: ['postTitle'],
template: '<h3>{{postTitle}}</h3>'                }
            },
template: '<div><PostItem :postTitle="title"></PostItem></div>'        })
vm.mount('#app')
</script></body></html>
image.gif

📗 问题分析

       // 问题1:在当前组件内,postlist和postitem哪个是父组件,哪个是子组件,为什么?

       答: postlist是父组件,postitem是子组件,因为postitem是在postlist下创建的数据

       // 问题2: props属性起到了什么作用?答:1保存数据 2接受传值

       // 问题3: 组件间是通过什么传值的,描述数据流向过程,从哪开始到哪结束?父组件向子组件传值 答:PostList.data.title ->PostItem.props.prop(postTile) {{postTitle}}

📗 实现效果

image.gif

目录
相关文章
|
22小时前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
22小时前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0
|
22小时前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
7 0
|
22小时前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
14 1
|
22小时前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable扩展属性的升级修改
ruoyi-nbcio-plus基于vue3的flowable扩展属性的升级修改
|
22小时前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
22小时前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
22小时前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
22小时前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
22小时前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01