props属性

原创 已于 2024-04-08 09:26:00 修改 · 212 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #vue #html
于 2024-04-08 09:24:29 首次发布

1.字符串数组，对象

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="app">
        <!-- 使用组件称为父组件 -->
      <!-- 绑定msg进行动态改变 -->
      <mycom1  hello="你好" parent-msg="这是来自父组件的msg"></mycom1>
    </div>

    <script>
        //创建组件称为子组件，父组件将数据传递给子组件
        //小驼峰命名，html不能识别大小写，需要将m小写
        Vue.component('mycom1',{
            props:['parentMsg','hello'],
            template:`<div>
                <p>{{hello}}</p>
                <p>{{parentMsg}}</p>
                <p>{{childmsg}}</p>
                </div>`,
            data(){

                return{
                    childmsg:'这是子组件'
                }
            }
        })

    </script>

    <script>
    var vm=new Vue({
        el:'#app',


} );
</script>
</body>
</html>

 

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="app">
        <!-- 使用组件称为父组件 -->
      <mycom1 :parent-msg="msg"></mycom1>
      <p>父组件的msg值:<input type="text" v-model="msg"></p>
    </div>

    <script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:''
        },
        method:{},
        components:{
            mycom1:{
                template:`<div>
                <p>{{parentMsg}}</p>
                </div>`,
                props:['parentMsg'],
            }
        }

} );
</script>
</body>
</html>

 

对象

props不可更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="app">
        <!-- 使用组件称为父组件 -->
      <mycom1 :parent-msg="msg"></mycom1>
    </div>
    
    <script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'父组件的msg'
        },
        components:{
            mycom1:{
                template:`<div>{{parentMsg}}---{{sonfromparent}}</div>`,
                props:['parentMsg'],
                data(){
                    return{
                        sonfromparent:this.parentMsg
                    }
                }
            }
        }

} );
</script>
</body>
</html>

 

style绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="app">
        <!-- 使用组件称为父组件 -->
      <mycom2 :width="msg"></mycom2>
    </div>
    
    <script>
          Vue.component('mycom2',{
            template:`<div :style='childwidth' style='border:1px solid black'>
                     我是子组件mycom2
                </div>`,
                props:['width'],
            computed:{
                childwidth:function(){
                    return{
                        width:this.width+'px'//width:200px
                    }
                }
            
            }
        })

    var vm=new Vue({
        el:'#app',
        data:{
            msg:'200'
        },

} );
</script>
</body>
</html>

30岁以前
关注
vue中组件的props属性（详）
热门推荐
蜗牛~~
10-28 18万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
vue2知识点：组件的props属性、非props属性、props属性校验
刘大猫
05-26 5392
文章目录3.10props属性举例：父组件给子组件传递属性msg和greetText，子组件用属性a和b接收，并打印输出3.11props校验举例3.12非props属性举例：定义子组件设置class和style，而标签引用子组件时也设置了class和style，那么会进行属性合并，如果重名采用就近原则。 3.10props属性 组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 prop 给子组件下.
VS2019保存props属性表并在新项目中导入props属性表
一直在笑的博客
09-26 1万+
        最近在项目过程中，遇到了需要在多个vs工程中导入相同库的问题。每次新建项目都要配置很多include文件路径，导入一堆.lib文件，非常让人头疼。于是，找到了一种通过props属性表来解决这个问题的方法，可以一劳永逸。 一、什么是props属性表         props是工程属性表（project property sheet），主要包含了工程项目中的属性配置，可以供不同项目公共使用。在导入props文件后，
React之Props属性使用总结
weixin_34216036的博客
03-18 1062
故事:在刚开始学习react时候 会傻傻分不清props和state，导致在开发的时候 遇到问题就会很蒙蔽如果你觉得还是搞不清 state 和 props 的使用场景，那么请记住一个简单的规则：尽量少地用 state，尽量多地用 props。 没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）...
React - 组件之props属性
2302_81312344的博客
02-12 1500
在 React 中，props（即属性）是组件之间传递数据的一种方式。它是 React 组件的基础，用于将数据从父组件传递到子组件。
web应用技术作业06
2403_89185994的博客
06-17 106
把员工信息列表展示的页面的表格样式，从“带斑马纹表格”，改成“基础表格”样式，并且只占窗口的60%在pom.xml文件中引入dom4j的依赖用于解析XML文件emp.xml。stripe属性可以创建带斑马纹的表格。margin: 0 auto居中。border显示边框。
若以SpringBoot-Vue, 数据源切换架构详解
qq_43071699的博客
06-20 499
数据源切换架构摘要 本项目基于Spring Boot实现了一套灵活的数据源切换机制，仅需修改application.yml中的database.type配置项，即可自动完成以下联动： 配置层：通过Profile机制加载对应数据库的连接配置 属性绑定：自动绑定数据库类型、驱动、方言等参数 数据源装配：动态创建Druid连接池并设置为主数据源 SQL方言适配：自动加载对应数据库的Mapper文件和分页方言 运行时路由：通过AOP实现主从库读写分离 核心特点： 一处配置修改（database.type）触发五处自
vue3项目引用vue-office组件
荔枝吖阿
06-17 80
1. 安装 （vue-demi 0.14.10版本的比较稳定）2. Vite 配置优化。
Vue学习笔记
wanger61的博客
06-15 286
【代码】Vue学习笔记。
135 Vue 卡片标签溢出处理：如何用真实 DOM 宽度实现“显示部分标签 +N
samllucky的博客
06-17 231
本文介绍了在Vue中实现卡片标签溢出处理的精确方案。当标签过多时，不是简单截断，而是完整显示能放下的标签并用"+N"表示剩余数量。核心思路是通过隐藏的DOM测量标签实际宽度，动态计算容器能容纳的标签数。具体实现包括： 准备两套DOM：显示的标签区域和隐藏的测量区域 使用visibility:hidden而非display:none确保能获取真实宽度 计算容器可用宽度（需减去padding） 考虑flex布局的gap间距 实现从多到少的尝试算法，确定最多能完整显示的标签数 使用nextTick确保DOM更新完
Jenkins自动化部署Vue前端和.NET后端项目到Windows服务器
cgs的博客
06-16 364
目标：想要将仓库中的前后端项目通过自动化部署到指定的服务器，前端项目使用的是，后端项目使用的是。jenkins 服务器是，windows 服务器是。
Spring Boot + Vue 在线法律咨询辅助系统：从需求分析、数据库设计到核心功能实现
最新发布
2301_79630794的博客
06-22 138
基于 Spring Boot、Vue、MyBatis 与 MySQL 设计在线法律咨询辅助系统，梳理用户端与管理端功能、核心数据表、登录鉴权流程、咨询业务闭环及测试优化思路。
Vue3自定义插件：封装一个全局消息提示插件，所有组件都能直接用
阿猫故乡的博客
06-15 518
本文详细介绍了如何从零开始开发一个Vue3全局消息提示插件，主要内容包括： 插件基础概念：Vue插件是一个包含install方法的对象，通过app.use()注册后可在整个应用中使用。 实现步骤： 创建基础插件框架，挂载全局$toast方法 开发ToastMessage组件，支持不同类型消息和动画效果 使用createApp动态创建组件实例并挂载到DOM 封装useToast工具函数简化调用 实现单例模式防止消息叠加 核心技术点： 动态组件挂载与卸载 Transition过渡动画 全局方法注册 单例模式应用
TypeScript 基础入门：在 Vue/uni-app 项目中理解常见类型
前端开发努力中！
06-17 294
TypeScript 基础类型在 Vue/uni-app 中的应用 本文介绍了 TypeScript 在 Vue/uni-app 项目中的基础类型用法，包括： 类型推断：自动推断变量类型 函数类型：参数和返回值类型约束 字面量类型：限制变量为固定值 联合类型：变量可为多种类型之一 any与unknown：处理不确定类型，unknown更安全 类型断言：强制指定类型 void与never：函数返回值类型 Vue中ref的泛型写法：明确响应式数据类型 文章通过实际代码示例，对比了不同类型的特点和使用场景，特别强
websocket vue跟后台的交互
vigor(软件开发)
06-17 354
【代码】websocket vue跟后台的交互。
vue中加载svg，为指定g添加样式&事件
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
06-16 62
本文介绍了在Vue中动态加载SVG文件并实现交互功能的方法。通过封装组件，将SVG以文本方式加载，修改其属性使其自适应容器大小。文章重点讲解了如何为SVG中的特定元素（如g标签）绑定鼠标移入和点击事件，使用event.currentTarget精准获取目标元素，并实现选中状态切换效果。示例代码展示了完整的实现过程，包括SVG加载、属性修改、事件绑定以及样式处理，最终实现了一个可交互的场站地图效果。
【Spring Boot + Vue + DeepSeek】从零打造一个AI驱动的智能健康分析系统
qq_55236656的博客
06-15 274
体检报告数据专业性强，普通人难以解读健康数据分散，缺乏统一的智能分析手段医患沟通效率低，专家资源分配不均IoT健康设备数据无法与管理系统打通AuraHealth正是为了解决这些问题而设计——将 DeepSeek 大模型深度融入健康管理全流程，实现从数据采集 → AI分析 → 智能预警 → 医患协作 → 健康改进的完整闭环。
vue 插槽
a378113472的博客
06-20 265
template><h2>卡片标题</h2>-- slot 就是内容的占位符 --></div>渲染结果< div class = " card " > < h2 > 卡片标题 </ h2 > < p > 这是从父组件传入的内容 </ p > </ div >< div class = " card " > < h2 > 卡片标题 </ h2 > < p > 这是从父组件传入的内容 </ p > </ div >
VUE复习笔记
小方的博客
06-15 523
Vue.js 核心概念与项目结构解析 本文系统介绍了Vue.js的核心概念和项目文件结构关系，通过生动的"房屋装修"类比帮助理解： 四大文件关系： index.html：毛坯房（基础容器） main.js：搬家工人（应用入口） App.vue：硬装（根组件） 自定义组件：软装（可复用模块） Vue核心特性： 虚拟DOM提升性能 数据绑定自动更新视图 组件化开发模式 丰富的指令系统 环境搭建： 使用Vue CLI或Vite创建项目 详细说明了项目目录结构和单文件组件(.vue)的模板结构 全文通过生活化比喻和
拖拽文件上传组件
dy1717的博客
06-17 60
拖拽上传文件组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值