Vue-父子组件传值
在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。
一、父组件向子组件传值
使用 Prop 传递数据,父组件的数据需要通过 prop 才能下发到子组件中,子组件要显式地用 props 选项声明它预期的数据。
Vue.component('child', {
// 声明 props
props: ['myMessage'],
// 就像 data 一样,prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.myMessage 来使用
template: '<span>{{ myMessage }}</span>'
})
然后我们可以这样向它传入一个普通字符串:
<child my-message="hello!"></child>
也可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件
<div>
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
总结一下:
1.子组件在props中创建一个属性,用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性
⚠️子组件不能修改父组件传过来的值
二、子组件向父组件传值
总结一下:
1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
参考文章:https://www.cnblogs.com/daiwenru/p/6694530.html
Vue-父子组件传值的更多相关文章
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- Vue 父子组件传值 props
1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...
- vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue 父子组件传值,兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- Vue父子组件传值以及父调子方法、子调父方法
稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...
- VUE父子组件传值问题
一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...
- vue父子组件传值
1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...
- Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...
随机推荐
- python 提取linux的硬件信息
1.代码实现目的 注:代码可以直接粘贴使用 为了实现对主机的整体有明确的了解,实现了下面的代码功能 代码主要功能是: 提取到主机的内存.硬盘.CPU.型号等信息 插入到mysql的数据库中 2.代码具 ...
- Java:匿名类,匿名内部类
本文内容: 内部类 匿名类 首发日期 :2018-03-25 内部类: 在一个类中定义另一个类,这样定义的类称为内部类.[包含内部类的类可以称为内部类的外部类] 如果想要通过一个类来使用另一个类,可以 ...
- SQL Server的一个不显眼的功能 备份文件的分割
SQL Server的一个不显眼的功能 备份文件的分割 当完整备份数据库的时候,我们有时候可能会遇到一种极端情况,比如服务器上C,D,E三个盘符都只剩下5G空间了 但是如果要完整备份业务库需要12G的 ...
- [20180327]行迁移与ITL浪费.txt
[20180327]行迁移与ITL浪费.txt --//生产系统遇到的一个问题,增加一个字段到表结构,修改数据字典,导致出现行迁移,而更加严重的是没有修改pctfree值,--//以后的业务操作,依旧 ...
- scrapy爬取校花网男神图片保存到本地
爬虫四部曲,本人按自己的步骤来写,可能有很多漏洞,望各位大神指点指点 1.创建项目 scrapy startproject xiaohuawang scrapy.cfg: 项目的配置文件xiaohua ...
- Linux MySql 安装与配置
为什么选择MySQL数据库? 毫无疑问,绝大多数的使用linux操作系统的大中小型互联网网站都在使用MySQL作为其后端的数据库存储,从大型的BAT门户,到电商平台,分类门户等无一例都使用MySQL数 ...
- 【PAT】B1063 计算谱半径(20 分)
水题,没有难点 #include<stdio.h> #include<algorithm> #include<math.h> using namespace std ...
- 17秋 软件工程 团队第五次作业 Alpha Scrum12
各个成员今日完成的任务 Alpha版本完成. 项目的发布说明 本版本的新功能 1.部门人员管理,包括纳新申请与审核: 2.部门活动发布与查看: 3.部门活动相册: 4.子部门信息录入. 软件对运行环境 ...
- SAP CRM 自定义控制器与数据绑定
当用户从视图离开时,视图将失去它的数据.解决这个问题,需要引入自定义控制器(Custom Controller)(译者注:SAP CRM自定义端中,不同地方的Custom Controller会翻译为 ...
- vue_02 开发过程中的问题记载
1.package.json 运行 npm start 执行的是npm run dev 实际上执行的是“dev” : node build/dev-server.js这一条 跑的是build目录下d ...