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. Android开发之SharedPreferences的封装
  2. a_10在C语言的,在C语言中,能正确表示逻辑关系:a≥10或a≤-10的C语言表达式是...
  3. Enjoy Android
  4. NPM酷库:dateformat 时间字符串格式化
  5. 前端学习(3040):vue+element今日头条管理-上午回顾
  6. (运维日志)在win7安装Oracle并部署Oracle数据库
  7. java坦克大战源码下载
  8. TreeView 操作应用
  9. 《大型网站架构技术》系列分享专栏
  10. Android animation动画
  11. C#中==操作符存在的缺陷
  12. 桌面计算机 回收站图标,桌面回收站图标不见了?回收站图标没了?3种方法快速解决...
  13. 使用MTK的SN writer工具写IMEI的方法
  14. power bi数据分析_设置Power BI数据网关
  15. Confluence 6 协同编辑问题解决
  16. 量子点电视,下一代显示技术的必争之地
  17. PS调出春夏外景婚纱照
  18. iOS 开发者应该知道的 ARM 结构(转自apple4us)
  19. 优秀的PPT模板网站
  20. 我学历不高,怎样找前端的工作?

热门文章

  1. allegro如何删除没有网络的走线,查还没有连的网络线
  2. 【C语言】定义一个函数,求长方体的体积
  3. 机器学习笔记之深度信念网络(二)模型构建思想(RBM叠加结构)
  4. Java web实现百度地图导航
  5. 书评《半小时漫画中国史》
  6. 龙族幻想最新东京机器人位置_龙族幻想藤原智坐标位置一览 藤原智任务攻略...
  7. 【水果识别】柑橘质量检测及分级系统(带面板)【含GUI Matlab源码 1628期】
  8. 遥感数据处理之哨兵5P数据处理
  9. p95、p99、p999 什么意思
  10. mac+unity3d准备工作——磨刀