Vue.js-10:第十章 - 组件间的数据通信
一、前言
在上一章的学习中,我们继续学习了 Vue 中组件的相关知识,了解了在 Vue 中如何使用组件的 data、prop 选项。在之前的学习中有提到过,组件是 Vue 中的一个非常重要的概念,我们通过将页面拆分成一个个独立的组件,从而更好地实现代码复用,使我们的代码更加简洁,容易维护。既然在 Vue 中我们会大量的使用到组件,必定会涉及到组件之间的通信,那么本章我们就来学习,如何实现组件间的数据交互。
学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html
仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/chapter02-bronze/component/communication.html
二、干货合集
1、父组件 => 子组件
在上一章的时候,我们有提到过,我们可以使用 prop 选项在组件中定义一些自定义特性,当有值传递给 prop 特性时,那个 prop 特性就变成了那个组件实例的一个属性,此时我们就可以从组件上获取到接收的值。因此,这里我们就可以在使用子组件时通过 v-bind 指令动态的绑定一个 prop 特性,从而接收到父组件传递的值。
可以看到,在下面的示例代码中,我们在子组件中通过 v-bind 指令绑定了一个 prop 特性 parenttitle,用来接收父组件 data 选项中的 title 属性,之后通过 watch 监听属性监听绑定的 parenttitle 属性,从而同步更新子组件 data 选项中的 content 属性值。
<body>
<div id="app">
<h4>
请输入需要传递给子组件的值:<input type="text" v-model="title" />
</h4> <hr /> <child-node v-bind:parenttitle="title"></child-node>
</div>
</body> <template id="child">
<div>
<h4>
Vue 实例中的属性值为:{{content}}
</h4>
</div>
</template> <script>
var vm = new Vue({
el: '#app',
data: {
title: ''
},
components: {
'childNode': {
template: '#child',
props: ['parenttitle'],
data() {
return {
content: this.parenttitle
}
},
watch: {
parenttitle() {
this.content = this.parenttitle
}
},
}
}
})
</script>
2、子组件 => 父组件
在 Vue 中存在着一个单向的下行绑定,父级组件的数据变更可以影响到子集组件,反过来则不行。在实际开发中可能会遇到当子组件的数据更新后,需要同步更新父组件的情况,那么这时我们应该怎么做呢?
既然没办法直接通过修改 prop 选项中的属性进行更新父组件,不如让我们换一个思路思考。我们想要实现的效果,无非是当子组件数据变更时能够同步引起父组件的变更,那么,我们是不是可以在子组件数据发生变化后,触发一个事件方法,告诉父组件我数据更新了,父组件只需要监听这个事件,当捕获到这个事件运行后,再对父组件的数据进行同步变更不就可以了,整个的示意流程如下。
那么,如何才能实现事件监听呢?
嗯,Vue 已经帮我们实现好了解决方案。我们可以使用 v-on 事件监听器监听事件,通过 $emit 去触发当前实例上的事件。当然,这里的事件可以是 Javascript 中的原生 DOM 事件,也可以是我们自定义的事件。
例如,在下面的代码中,当我点击传递数据按钮后,触发了子组件的 func 方法,在 func 方法中触发了子组件实例上的 show 事件,并把 input 框中的值作为参数进行传递。这时,我们在使用到子组件的地方就可以通过 v-on(@) 指令监听这个 show 事件,从而获取到传递的参数,并触发父组件的监听事件。
<body>
<div id="app">
<h4>
子组件中的属性值为:{{msg}}
</h4> <hr /> <child-node @show="showMsg"></child-node>
</div>
</body> <template id="child">
<div>
<h4>
请输入需要传递给父组件的值:<input v-model="childMsg" type="text" />
<button @click="func">传递数据</button>
</h4>
</div>
</template> <script>
var vm = new Vue({
el: '#app',
data: {
title: '',
msg: '',
},
methods: {
showMsg(data) {
this.msg = data
}
},
components: {
'childNode': {
template: '#child',
data() {
return {
childMsg: ''
}
}
methods: {
func() {
this.$emit('show', this.childMsg)
}
},
}
}
})
</script>
三、总结
这一章主要介绍了组件之间进行数据通信的两种最常用的方式,对于子组件获取父组件数据,一般是采用组件的 prop 选项向子组件传递数据;而父组件获取子组件数据,则是采用事件监听的方式。在实际使用中,组件的通信方式还有 .sync、$attrs、$listeners、slot-scope 等等,这里就先不介绍了,嗯,其实就是我还不会,哈哈,先学习掌握这两种最常见的方式,其它的方式就先放到后面再学习吧。
四、参考
1、Vue的事件解读
Vue.js-10:第十章 - 组件间的数据通信的更多相关文章
- Vue.JS快速上手(组件间的通信)
前言 Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下. 所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue.js 相关知识(组件)
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- 详细讲解vue.js里的父子组件通信(props和$emit)
在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...
- Vue.js 第4章 组件与路由
组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
随机推荐
- Search in rotated array two
description: Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed ...
- 在C# 中 如何限制在文本框(textBox)中输入的类型为正整数
在文本框的 KeyPress 事件中写下这些代码就可以保证是正整数了 private void textBox1_KeyPress(object sender, KeyPressEventArgs e ...
- Python的logging日志
日志级别:critical > error > warning > info > debug,notset级别越高打印的日志越少,反之亦然,即debug : 打印全部的日志(n ...
- rsync 密钥文件错误问题总结
rsync 可以使用 --password-file 选项指定密钥文件,密钥文件中简单存放 rsync 密码:在第一次使用密钥文件的时候经常遇到文件权限相关问题:这里总结一下,我遇到的问题. 问题描述 ...
- IT连创业系列:近期功能调整(小魔术功能从二级目录调整到一级栏目)
最近花了点时间,折腾了一下.NET Core,因此有几篇 Taurus.MVC + CYQ.Data 的文章出来. 这两天也顺带把 ASP.NET Aries 升级了一下功能, 也计划支持.NET C ...
- Redis数据结构简介
Redis可以存储键与5种不同数据结构类型之间的映射,这5种数据结构类型分别为STRING(字符串).LIST(列表).SET(集合).HASH(散列)和ZSET(有序集合).有一部分Redis命令对 ...
- 初识函数库libpcap
由于工作上的需要,最近简单学习了抓包函数库libpcap,顺便记下笔记,方便以后查看 一.libpcap简介 libpcap(Packet Capture Library),即数据包捕获函数库, ...
- MATCH_PARENT和FILL_PARENT之间的区别?
很多人表示对于很多工程中的MATCH_PARENT出现在layout中感到不明白,过去只有FILL_PARENT和WRAP_CONTENT那么 match_parent到底是什么类型呢? 其实从And ...
- jQuery 素材 缩略图轮播集合
http://www.17sucai.com/pins/demo-show?id=27124 http://www.17sucai.com/pins/demo-show?id=4712 楼盘详情缩略 ...
- Java 精简Jre jar打包成exe
#开始 最近几天都在忙一个事情,那就是尝试精简jre,我想不明白为什么甲骨文官方不出exe打包工具... 网络上精简jre的文章很多,但是原创的似乎没几个,绝大多数都是转发同一个博客, 这里借鉴了不少 ...