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

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. JavaScript:函数:函数的参数

    声明函数的时候,有个括号,这里面可以加上函数的参数,这些参数,我们叫做形参(形式参数): 此时这些参数,也是已经声明了的变量,只是还没有赋值而已. 也可以不加,取决于函数的逻辑.如果函数需要从外部传进 ...

  2. C++进阶(unordered_set+unordered_map模拟实现)

    unordered_set unordered_set是以无特定顺序存储唯一元素的容器,并且允许根据它们的值快速检索单个元素,是一种K模型. 在unordered_set中,元素的值同时是它的key, ...

  3. 【Azure 云服务】为Azure云服务配置上自签名的SSL证书步骤

    问题描述 在使用Azure Cloud Service(云服务),默认的情况下都是使用的 HTTP 服务,通过 Visual Studio 2022 创建的默认 Cloud Service项目中,在S ...

  4. Django(2) - Django模板

    1.Django模板介绍 基础概念 模板是具有一定的格式或骨架,可以动态的生成HTML 模板引擎决定以何种方式组织代码 一个项目可以有一个或者是多个模板引擎,Django里面主要两个模板引擎:DTL. ...

  5. vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置

    1.vite+TS+Vue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Selec ...

  6. 温故知新 - 靶机练习-Toppo

    今天闲来无事,重新做了一下以前做过的第一个靶机(https://www.cnblogs.com/sallyzhang/p/12792042.html),这个靶机主要是练习sudo提权,当时不会也没理解 ...

  7. [R语言] 基于R语言实现树形图的绘制

    树状图(或树形图)是一种网络结构.它由一个根节点组成,根节点产生由边或分支连接的多个节点.层次结构的最后一个节点称为叶.本文主要基于R语言实现树形图的绘制.关于python实现树形图的绘制见:基于ma ...

  8. Python Excel 追加数据

    xlutils 库的安装 你好,我是悦创. 前面我分享了 Excel 的读写:Python 实现 Excel 的读写操作:https://bornforthis.cn/column/pyauto/au ...

  9. 聊聊MongoDB中连接池、索引、事务

    大家好,我是哪吒. 三分钟你将学会: MongoDB连接池的使用方式与常用参数 查询五步走,能活九十九? MongoDB索引与MySQL索引有何异同? MongoDB事务与ACID 什么是聚合框架? ...

  10. DVWA靶场实战(六)——Insecure CAPTCHA

    DVWA靶场实战(六) 六.Insecure CAPTCHA: 1.漏洞原理: Insecure CAPTCHA(不安全的验证码),CAPTCHA全程为Completely Automated Pub ...