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 ...
最新文章
- Android开发之SharedPreferences的封装
- a_10在C语言的,在C语言中,能正确表示逻辑关系:a≥10或a≤-10的C语言表达式是...
- Enjoy Android
- NPM酷库:dateformat 时间字符串格式化
- 前端学习(3040):vue+element今日头条管理-上午回顾
- (运维日志)在win7安装Oracle并部署Oracle数据库
- java坦克大战源码下载
- TreeView 操作应用
- 《大型网站架构技术》系列分享专栏
- Android animation动画
- C#中==操作符存在的缺陷
- 桌面计算机 回收站图标,桌面回收站图标不见了?回收站图标没了?3种方法快速解决...
- 使用MTK的SN writer工具写IMEI的方法
- power bi数据分析_设置Power BI数据网关
- Confluence 6 协同编辑问题解决
- 量子点电视,下一代显示技术的必争之地
- PS调出春夏外景婚纱照
- iOS 开发者应该知道的 ARM 结构(转自apple4us)
- 优秀的PPT模板网站
- 我学历不高,怎样找前端的工作?
热门文章
- allegro如何删除没有网络的走线,查还没有连的网络线
- 【C语言】定义一个函数,求长方体的体积
- 机器学习笔记之深度信念网络(二)模型构建思想(RBM叠加结构)
- Java web实现百度地图导航
- 书评《半小时漫画中国史》
- 龙族幻想最新东京机器人位置_龙族幻想藤原智坐标位置一览 藤原智任务攻略...
- 【水果识别】柑橘质量检测及分级系统(带面板)【含GUI Matlab源码 1628期】
- 遥感数据处理之哨兵5P数据处理
- p95、p99、p999 什么意思
- mac+unity3d准备工作——磨刀