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组件传参(父传子)相关推荐

  1. Vue.js父与子组件之间传参 父向子组件传参   例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht

    Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...

  2. Vue组件通信:父传子、子传父、跨组件通信

    方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...

  3. vue组件通信:父与子、子与父

    父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...

  4. vue组件通讯:父传子、子传父、事件发射详解

    1.组件通讯 每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据,  怎么办呢?  =>   组件通信组件通信的方式有 ...

  5. vue组件通信:父传子—子传父

    我们都知道组件是vue里很重要的一个知识点,这里我看的是b站上的coderwhy老师的视频 我看到了弹幕上说很多人在这一块不理解:下面我就来写分享以下我的课程总结 父传子 为什么要进行"传& ...

  6. react 子传参父_React 子组件给父组件传值、整个组件、方法

    一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...

  7. react 子传参父_React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...

  8. react 子传参父_react子父传参有几种方法?

    react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法 一 ...

  9. vue组件间传值: 父传子、子传父、非父子组件传值

    父组件向子组件传值 // 父组件通过属性将值传递给子组件 <template><div><closePopup :optionsID="optionsID&qu ...

最新文章

  1. 计算机考研b区国家线,考研b区国家线历年分数线情况
  2. 今天大佬告诉你Spring Boot 实现通用 Auth 认证的 4 种方式!
  3. 脚本大全_抖音文案大全2020励志:抖音最火励志搞笑句子,直接套用上热门
  4. Distributed TensorFlow
  5. 腾讯技术直播间 | 轻量产品思维!手把手教你搭建在线甲醛监测系统
  6. Oracle BIEE 链接oracle 数据库的问题,报:Check if 'Oracle OCI 10G' database client is installed
  7. WampServer 常见问题
  8. 关于python最大递归深度 - 998
  9. QSS(Qt样式表)概念
  10. 系统分析与设计知识点总结
  11. openssl生成自签名证书流程
  12. 从零开始搭建聊天机器人网页—Vue
  13. Gate.io 土耳其社区与 Casper AMA圆满完成,共话Casper未来发展
  14. MyBioSource丨人Hif1αelisa试剂盒解决方案
  15. Linux下pppd拨号脚本配置
  16. win10 uwp 打电话
  17. 组件封装 - 骨架屏组件
  18. 杂记——在开发ByteTalk中遇到的困难以及解决
  19. 数字滤波算法 在数字信号处理应用中使用微控制器
  20. 如何安装 Debian 11 操作系统手把手教学

热门文章

  1. asp.net摄影网站系统VS开发sqlserver数据库web结构c#编程计算机网页源码项目
  2. 海康威视(HIKViSION)2009年校园招聘笔试题-杭州(1)
  3. java代码word转pdf
  4. GPU、GPU驱动、OpenGL、游戏引擎之间的关系
  5. [bzoj4816][Sdoi2017]数字表格 (反演+逆元)
  6. mysql修改索引语句_mysql——创建索引、修改索引、删除索引的命令语句
  7. 用技术致敬每一位妈妈,B站up主用AI还原李焕英老照片动态影像
  8. 待定系数法求二阶常系数非齐次线性方程特解
  9. 计算机组成原理——指令系统(课程笔记)
  10. NC 开发环境因电脑高分辨率导致系统文字、图标变小等。