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)分析:当渲染不同的轮 ...
随机推荐
- 为什么要用GCD-Swift2.x
为什么要用GCD-Swift2.x 当今世界,多核已然普及.但是APP却不见得很好的跟上了这个趋势.APP 想要利用好多核就必须可以保证任务能有效的分配.并行执行可以让APP同时执行很多 的任务.这个 ...
- 事件冒泡的应用——jq on的实现
曾对jQuery中on的实现有所疑问,一直没有找到合适的实现方法,今日看<javascript高级程序设计>中的事件冒泡有了些思路. 针对于新增的DOM元素,JQ中若为其绑定事件就必须使用 ...
- 20169207《linux内核原理与分析》第二周作业
第一部分:学习MOOC网Linux内核分析的课程. 首先对冯诺依曼体系结构和存储程序计算机工作模型进行了了解,查阅资料,对冯诺依曼体系的特点与课堂上的相结合,真实明白了模型的特点. 在汇编C语言程序时 ...
- bash多进程
#!/bin/bashCMD_PATH=`dirname $0`#echo $CMD_PATH > /home/wubin/testjava -jar $CMD_PATH/Server.jar ...
- java基础-day31
第08天 JDBC 今日内容介绍 u JDBC的概述及入门案例 u JDBC的API详解 u JDBC预处理对象 第1章 JDBC的概述及入门案例 1.1 JDBC概述和原理 1.1.1 JDB ...
- QOpenGLFunctions的相关的使用(1)
QOpenGLFunctions的使用 1. QOpenGLFunctions 说明 QOpenGLFunctions 类提供了跨平台的OpenGl ES2.0 API版本. OpenGL 2. ...
- hdu 5013 优化疑问+dp
http://acm.hdu.edu.cn/showproblem.php?pid=5013 m个游客,n座城市(m, n <= 16), 每个人从1走到n, 每次有一定概率停在原地,然后以后就 ...
- 状态 ajax
//html部分 <a href="#" data-status="{$vo.state}" data-urid="{$vo.id}" ...
- JS中访问对象的两种方式区别
可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名["方法名"]() var obj = { n ...
- C++中的四种类型转换
//1.常见的类型转换,使用static_cast float f = 1.234; int i =static_cast<int>(f);//等价于 int i = (int)f; // ...