提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

每日一学—Vue prop属性

Vue属性 每日 prop 一学
2023-09-11 14:15:13 时间

📚文章目录

📗prop属性 

📗示例代码 

📗问题分析 

📗实现效果 

📗prop属性 

  • prop可以像调用方法那样对组件进行传参，当需要给某一个组件传递prop参数时，这个prop就成为vue组件中的data()对象的一部分，可以直接在组件作用域内使用。
  • 组件可以支持多个(n个)prop属性变量，任意类型都可以传给对应的prop。
  • 当组件内部变量受到组件外部变量的影响时，就需要用prop来搭建变量之间的桥梁。用prop可以定义组件内部变量的名称和数据类型，以及其他数据需求，等同于给组件向外暴露了一个可修改的属性。

🧩prop的大小写

  • HTML有一个特性，就是几乎所有的大写字符都会转义为小写字符，这很容易导致在编写的HTML结构时有很多camelCase（驼峰命名，这种命名方式除第一个单词外，其他单词的首字母都大写）的属性、标签转换为与实际不符的小写。
Vue.compoent('sg-component',{
    //在JavaScript中是camelCase的
    props:[bigTitle],
    template:'<h3>{{ bigTitle }}</h3>'
})
<!-- 在HTML中是kebab-case的 -->
<sg-component big-title="hello!"></sg-component>
  • 例如，上面的代码，props 中有一个自定义参数 bigTitle 中的T是大写的，但实际上在HTMIL中插人标签属性名时却需要写成 big-title。
  • 所以，简单总结一下：如果传人 props 是 aBeD 的名称，那么绑定属性的名称就要为 ab-c-d。找到这个规律平时使用时注意即可，尽量用一个简单词汇体现需要的属性名，少用区分大小写的命名，也是提高编程效率、减少错误率发生的编写规范之一。

🧩prop类型

  • 使用字符串值来传递属性值是非常初级的操作方式，更高级的是用对象模式来定义组件参数。
props:['title','thumbs','isReleased','evaluate','creater']
  • 上面的方式没有对title、thumbs、isReleased、evaluate、creater这几个参数变量的类型格式进行定义，仅仅只是定义了参数名称。
  • 在开发组件时，需要对参数进行规范的格式限定。Vue.js 提供了以对象的形式来定制每一个组件参数，这些属性的名称和值分别是prop各自的名称和类型。
props:{
title:String,
thumbs:Number,
isReleased:Boolean,
evaluate:Array,
creater:Object,
callback:Function,
myPromise:Promise
}
  • 这样即便是非本组件的开发者引用该组件，也能轻松知道如何传入对应的参数，这不仅为其他开发人员提供了使用组件的参数类型描述，而且当遇到参数类型不匹配的报错时，在控制台用户也能看到具体的报错信息。

📗示例代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue3.0.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <post-list></post-list>
    </div>
    <script>
        const vm = 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>

📗问题分析 

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

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

问题2： props属性起到了什么作用？

答:1保存数据 2接受传值

问题3： 组件间是通过什么传值的，描述数据流向过程，从哪开始到哪结束？父组件向子组件传值

答:PostList.data.title ->PostItem.props.prop(postTile) {{postTitle}}

📗实现效果 

相关文章