vue组件传参(父传子)
Vue传值
1.父传子
父组件是通过props属性给子组件通信的
数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)只能从上到下
实现步骤
1.子组件在props中创建一个属性,用于接收父组件传过来的值;
2.父组件 引入子组件–>注册子组件–>引用子组件;
3.在子组件标签中添加子组件props中创建的属性;
4.将所要传递的值赋值给该属性。
props接收的几种写法
1.直接使用 props 以一维数组的方式接收
props: ['childData']
2.接收字符串
props: {childData: String //这里指定了字符串类型,如果类型不一致会警告的哦
}
3.使用对象形式接收,并赋予默认值,但是在数组这里接收有问题,一个大坑,请看第四种
props: {childData: {type: String,default: '默认值' //接收数据时给定一个默认值 }
}
4.接收数组,是需要以函数形式接收
props: {minetlist: {type: Array,default() {return []}}}
tpye支持以下数据类型:
String Number Boolean Array Object Date Function Symbol
props:{// 基础的类型检查(‘null’匹配任何类型)propA:Number,// 多个可能的类型propsB: [String,Number],// 必须的字符串propC: {type:String,required:true},// 有默认值的数字propD:{type:Number,default:100},// 有默认值的对象propE:{type:Object,// 对象或数组默认值必须从一个工厂函数获取default:function(){return {message:'hello'}}},// 自定义验证函数propF:{validator: function(value){// 这个必须匹配下列字符串中的一个return:['success','warning','danger'],indexof(value) !== -1}
}
特别注意
:
所有的prop都使得其父子prop形成一个单向数据流,即单向下数据流。父级prop的更新会单向流动到子组件中,但是反过来则不行,单向数据流能防止子组件意外改变父组件的状态
。额外的,每次父组件发生改变时,子组件中的prop将会更新为最新的值。
代码演示
1 . 父组件parent.vue代码如下
<template><div class="parent"><h2>{{ msg }}</h2><son :sonMsg="msg"></son> <!-- 子组件绑定msg变量--></div></template><script>import son from './Son' //引入子组件export default {name: 'parent',data () {return {msg: '父组件数据',}},components:{son},}</script>
2 . 子组件son代码如下
<template><div class="son"><p>{{ Msg }}</p><p>子组件接收到内容:{{sonMsg}}</p></div></template><script>export default {name: "son",data(){return {Msg:'子组件',}},props: { //接收sonMsg值sonMsg: {type: String,default: '子组件默认值' }}}
</script>
vue组件传参(父传子)相关推荐
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
- Vue组件通信:父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...
- vue组件通信:父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...
- vue组件通讯:父传子、子传父、事件发射详解
1.组件通讯 每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
- vue组件通信:父传子—子传父
我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频 我看到了弹幕上说很多人在这一块不理解:下面我就来写分享以下我的课程总结 父传子 为什么要进行"传& ...
- react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
- react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
- react 子传参父_react子父传参有几种方法?
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法 一 ...
- vue组件间传值: 父传子、子传父、非父子组件传值
父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...
最新文章
- 计算机考研b区国家线,考研b区国家线历年分数线情况
- 今天大佬告诉你Spring Boot 实现通用 Auth 认证的 4 种方式!
- 脚本大全_抖音文案大全2020励志:抖音最火励志搞笑句子,直接套用上热门
- Distributed TensorFlow
- 腾讯技术直播间 | 轻量产品思维!手把手教你搭建在线甲醛监测系统
- Oracle BIEE 链接oracle 数据库的问题,报:Check if 'Oracle OCI 10G' database client is installed
- WampServer 常见问题
- 关于python最大递归深度 - 998
- QSS(Qt样式表)概念
- 系统分析与设计知识点总结
- openssl生成自签名证书流程
- 从零开始搭建聊天机器人网页—Vue
- Gate.io 土耳其社区与 Casper AMA圆满完成,共话Casper未来发展
- MyBioSource丨人Hif1αelisa试剂盒解决方案
- Linux下pppd拨号脚本配置
- win10 uwp 打电话
- 组件封装 - 骨架屏组件
- 杂记——在开发ByteTalk中遇到的困难以及解决
- 数字滤波算法 在数字信号处理应用中使用微控制器
- 如何安装 Debian 11 操作系统手把手教学
热门文章
- asp.net摄影网站系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
- 海康威视(HIKViSION)2009年校园招聘笔试题-杭州(1)
- java代码word转pdf
- GPU、GPU驱动、OpenGL、游戏引擎之间的关系
- [bzoj4816][Sdoi2017]数字表格 (反演+逆元)
- mysql修改索引语句_mysql——创建索引、修改索引、删除索引的命令语句
- 用技术致敬每一位妈妈,B站up主用AI还原李焕英老照片动态影像
- 待定系数法求二阶常系数非齐次线性方程特解
- 计算机组成原理——指令系统(课程笔记)
- NC 开发环境因电脑高分辨率导致系统文字、图标变小等。