功能:让组件接收外部传过来的数据

1、传递数据:

<Demo name="XXX"/>

2、接收数据:

(1)第一种方式(只接收):

  props:['name']

(2)第二种方式(限制类型):

  props:{

    name:String

  }

(3)第三种方式(限制类型、限制必要性、指定默认值)

  props:{

    name:{

    type:String,  //类型

    required:true,  //必要性

    default:"老王"  //默认值

    }

  }

3、备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,

  若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

案例:

1、传值:

2、接收值:

结果图:

Vue props配置项(属性)的更多相关文章

  1. vue watch 可以监听子组件props里面属性的改变

    子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');

  2. wangEditor编辑器 Vue基本配置项

    wangEditor编辑器 Vue基本配置项 1.Vue安装方法 npm i wangeditor -S <template> <div id='wangeditor'> &l ...

  3. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  4. Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  5. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  6. Ext JS 4 新特性2:配置项属性(config)之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  7. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  8. vue——props的两种常用方法

    vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...

  9. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  10. Vue(十二)vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. 架构设计(四):CDN

    架构设计(四):CDN 作者:Grey 原文地址: 博客园:架构设计(四):CDN CSDN:架构设计(四):CDN CDN 全称 Content delivery network ,即:内容分发网络 ...

  2. 发送http2请求

    有时服务器会检测http协议版本,有http/1.1和h2,requests发送的是http1.1的请求 # pip install httpx client = httpx.Client(http2 ...

  3. 网络监测工具之Zabbix的搭建与测试方法(三) ---Zabbix Agent

    安装客户端 在官方网站下载最新版本zabbix agent v6.2.6,然后默认安装,其中配置服务端的界面如下图: 其他一律默认即可. 启用发现功能 如上图所示,开启发现规则,默认搜索zabbix ...

  4. [编程基础] Python中*args和**kwargs参数的使用

    本文主要介绍Python中*args和**kwargs参数的使用 文章目录 1 使用 2 拓展 3 参考 1 使用 在Python中,定义函数时可以使用两个特殊符号,以允许它们接受可变数量的参数.这两 ...

  5. Hadoop详解(10) - Hadoop HA高可用

    Hadoop详解(10) - Hadoop HA高可用 HA概述 HA(High Availablity),即高可用(7*24小时不中断服务). 实现高可用最关键的策略是消除单点故障.HA严格来说应该 ...

  6. 使用 Link Cut Tree 维护最小生成树

    简介 本文将简单介绍如何使用 Link Cut Tree 维护动态图最小生成树. 思路 最小生成树的性质:一个基环树的最小生成树,为将环上边权最大的边删除后所组成的树. Proof:如果删除环上的其他 ...

  7. Spring Cloud服务发现组件Eureka

    简介 Netflix Eureka是微服务系统中最常用的服务发现组件之一,非常简单易用.当客户端注册到Eureka后,客户端可以知道彼此的hostname和端口等,这样就可以建立连接,不需要配置. E ...

  8. vue3+quasar+capacitor开发多平台项目,使用quasar改变主题背景

    quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改 方案一: 修改样式所需文档: 这里是样式修改的说明:https://quasar.dev/ ...

  9. Array.from的9大优美用途!!!看了不后悔哦~~~~

    纯手工打印调试~~~~ 九种用途~~~超赞的哦~~~~~ <!DOCTYPE html> <html lang="en"> <head> < ...

  10. 基于APIView&ModelSerializer写接口

    目录 基于APIView&ModelSerializer写接口 一.首先准备前提工作 1.模型代码 2.路由代码 3.视图代码 二.继承Serializer序列化定制字段的三种方法 1.通过s ...