vue父组件传参给子组件
其实组件之间传参有很多种方法:
1.通过本地存储
2.使用vuex状态管理
今天记录一下第三种方法
1.首页我们先创建一个项目(创建项目自行百度)
2.打开项目,在components文件夹下新建一个vue文件,我这边以header.vue为例(这个是子组件):
<template>
<section class="chind">
<div>{{userName}}</div>
</section>
</template>
js部分
<script>
export default {
props:['userName']//主要是通过props来接受父组件传过来的值
}
</script>
3.找到App.vue这个文件,如果使用vue-cli创建的项目,里面会自动生成这个文件的(这是父组件)
template部分
<template>
<section class="chind">
<!--注意下面的userName和子组件props里面的参数要一致-->
<test :userName="兔子先生"></test>
</section>
</template>
解释:<test :userName="兔子先生"></test> 兔子先生就是需要传给子组件的值,你也可以把它变成动态的,在当前vue文件的data里面定义即可。
js部分
<script>
//引入子组件 名称可以随意 我这边是test
import test from './components/header'
export default {
components:{
test
}
}
</script>
总结:
1父组件给子组件传参主要是通过props来实现的。
2在父组件的test标签里面定义一个属性,并且将要传的值 赋值给这个属性。
3而在子组件里,直接通过props 即可获取你在父组件上的test标签里面定义的属性了。然后可以直接在子组件的页面上使用,无需在data中定义。
vue父组件传参给子组件的更多相关文章
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- Vue--父组件传数据给子组件,子组件生命周期过程拿到数据的情况
需求: 在子组件渲染之前,我要修改数据的某个字段 结果是 组件在beforeUpdate,updated 的状态才能拿到父组件的数据 那么证明,我根本无法在beforeUpdate,updated两个 ...
- vue子组件传参给父组件
关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...
- js 父组件向子组件传参
有一个父组件页面如上,点击新增或者修改都会弹出同一个子组件如下: 父组件传参到子组件有两种方式: 一.直接把对象当成参数传给子组件,(看上去更简单,经测试发现一个问题,因为新增时要置空对象的所有信息, ...
- vue组件传参
一.父子组件的定义 负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件 将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以 ...
- 从 Vue 的视角学 React(四)—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
- vue 组件传参
路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
随机推荐
- REST WebService与SOAP WebService的比较
在SOA的基础技术实现方式中WebService占据了很重要的地位,通常我们提到WebService第一想法就是SOAP消息在各种传输协议上交互.近几年REST的思想伴随着SOA逐渐被大家接受,同时各 ...
- 最基本的CentOS 网络配置
一般CentOS 网络配置是根据自己的需求来设定的.但是,对于一些不经常用CentOS的用户来说,不知道基本的CentOS 网络配置.如果你没有特别的要考虑的设置,那么就可以考虑下我推荐的这种Cent ...
- c#运用反射获取属性和设置属性值
/// <summary> /// 获取类中的属性值 /// </summary> /// <param name="FieldName">&l ...
- NoSQL世界的几个重要理论
和所有事物一样,NoSQL的兴起也是由许多理论支撑作为前提的,正是由下面一些理论的支撑,NoSQL的方向才能如此明朗. 1.CAP理论 CAP理论无疑是导致技术趋势由关系数据库系统向NoSQL系统转变 ...
- Poj2296
题意:给定n个点,然后在每个点在一个正方形的上边或者下边的中点,并且所有的正方形等大且不能重叠.求正方形最大的边长是多少. 思路:很明显的二分边长+判定.不过判定要用到2-sat,算是2-sat的入门 ...
- MySQL--binlog和relay log的生成和删除
##================================================================================================== ...
- mysql 返回结果按照指定的id顺序返回
mysql> ,,,,) order by field(id,,,,,) limit ,; +----+-------+------+ | id | name | sex | +----+--- ...
- C# 中使用Linq和Lambda表达式对List<T>进行排序
C#中List<T>排序的两种方法 List<Student> stu = (List<Student>)Session["StudentList&quo ...
- 使用EF6连接mariaDB出现中文查找不到数据的问题
1.问题描述 这两天使用ef6.0查询mariaDB出现了数据查询不到的情况 2.问题分析 后来发现除了这段数据查询不到,其他都能查询,于是逐步对比代码,发现其他数据都是英文的,而这句是中文的于是把条 ...
- Lily-一个埋点管理工具
本文来自网易云社区 前言 在很多项目中,埋点数据使用表格来统计的,随着项目的进行,数据量越来越复杂,越来越难以维护.所以很多公司都已经开发了一整套系统,从埋点的录入到代码的输出. 我们项目中iOS和A ...