正文
Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
Vue组件通讯 Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)
1.父->子组件通讯
父->子组件通讯，是通过props进行数据传递，并且具有这几个特性，单向传递，子组件接收的数据不可以更改，如果更改，会发出警告，每次父组件更新时，子组件的所有 prop 都会更新为最新值.
1 父组件
2 <template lang="pug">
3 .father
4 Children(:name='msg')
5 </template>
6 <script>
7
8 import Children from './Children'
9 export default {
10 name: 'father',
11 data () {
12 return {
13 msg: '我是father的数据'
14 }
15 }
16 }
17 </script>
1 子组件
2 <template lang="pug">
3 .children
4 .box {{name}}
5 </template>
6
7 <script>
8 export default {
9 name: 'father',
10 // props: ['name'], 1.props的第一种写法
11 // props: {2.props的第二种写法
12 // name: Array
13 // },
14 props: {3.props的第三中写法(推荐)
15 name: {
16 type: String
17 }
18 },
19 data () {
20 return {
21 msg: '我是children的数据'
22 }
23 }
24 }
25 </script>
1 2.子->父组件通讯
2
3 一般子->父组件通讯是通过Events事件进行值得传递
4
5 父组件
6 <template lang="pug">
7 .father
8 Children(@hand='hand') //自定义事件1 </template>
9
10 <script>
11 import Children from './Children'
12 export default {
13 name: 'father',
14 data () {
15 return {
16 msg: '我是father的数据'
17 }
18 },
19 components: {
20 Children
21 },
22 methods: {
23 hand (msg) {
24 alert(msg)//拿到子组件传递的值
25 }
26 }
27 }
28 </script>
1 子组件
2 <template lang="pug">
3 .children
4 input(type='button' value='clickMe' @click='handle')
5 </template>
6
7 <script>
8 export default {
9 name: 'children',
10 data () {
11 return {
12 msg: '我是children的数据'
13 }
14 },
15 methods: {
16 handle () {
17 this.$emit('hand', this.msg) //发送事件名+传递的值
18 }
19 }
20 </script>
3.兄弟组件通讯
由上可知，父子组件通讯都会有一个媒介，相当于一个传递信息的介质，才可以使得数据传递过去。兄弟组件通讯业需要一个介质，我们通常称之为事件线~
1.创建一个组件 名字：eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下
1 import Vue from 'vue'
2 export default new Vue()
2.创建第一个兄弟组件,名字：Emit
1 <template lang="pug">
2 .emit
3 .box Emit组件a
4 button(@click='show') 向on组件传值
5 </template>
6
7 <script>
8 import bus from '../assets/eventBus'
9 export default {
10 methods: {
11 show () {
12 bus.$emit('user', 'haha')
13 }
14 }
15 }
16 </script>
3.创建第二个兄弟组件，名字：On
1 <template lang="pug">
2 .on
3 .cont 接受emit组件的数据:{{msg}}
4 </template>
5
6 <script>
7 import bus from '../assets/eventBus'
8 export default {
9 data () {
10 return {
11 msg: 'on'
12 }
13 },
14 mounted () {
15 let self = this
16 bus.$on('user', (msg) => {
17 self.msg = msg
18 })
19 }
20 }
21 </script>
在vue中常用的传值方式也就是这三种，但方放不局限于这三种。
Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)的更多相关文章- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- Vue父组件传递异步获取的数据给子组件
问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...
随机推荐- Ques前端组件化体系
Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点 无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件 我们期望能以MV*的方式去 ...
- HDOJ2006求奇数的乘积
求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- animate基础
用JQUERY做动画是很方便的,已经看过大牛们做出不逊色于FLASH的各种效果. 其中的基本功就有animate这个方法的使用.于是,从零开始,训练基本功: <body> <div ...
- yum仅下载RPM包不安装
http://www.ttlsa.com/linux/howto-yum-download-rpm-without-install/
- Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
- Java Map 及相应的一些操作总结
Map是我们在开发的时候经常会用到的,大致有以下几个操作,其中putAll方法是针对集合而言的操作,故不再进行说明,下面请看一下常用的知识点吧,尤其是keySet和Values两个方法及相应值的获取方 ...
- python3安装lxmlpipinstall安装失败解决办法
最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...
- Kalman Filters
|—定位—|—蒙特卡洛方法(定位自身) | |—卡尔曼滤波器(定位其他车辆) |—高斯函数 |—循环两个过程—|—测量(测量更新) | ...
- element-ui el-input只显示下划线
只需要增加样式 .el-input__inner { width: 220px; border-top-width: 0px; border-left-width: 0px; border-right ...
- 如何使用NSDL玩转微信跳一跳
目前网上介绍windows和IOS操作系统上玩微信跳一跳的有很多文章,但介绍Linux平台下的文章相对较少,所以动手操作下和大家分享,同时感谢wangshub在github上的分享: 1 下载wech ...
Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)
1.父->子组件通讯
父->子组件通讯，是通过props进行数据传递，并且具有这几个特性，单向传递，子组件接收的数据不可以更改，如果更改，会发出警告，每次父组件更新时，子组件的所有 prop 都会更新为最新值.
1 父组件
2 <template lang="pug">
3 .father
4 Children(:name='msg')
5 </template>
6 <script>
7
8 import Children from './Children'
9 export default {
10 name: 'father',
11 data () {
12 return {
13 msg: '我是father的数据'
14 }
15 }
16 }
17 </script>
1 子组件
2 <template lang="pug">
3 .children
4 .box {{name}}
5 </template>
6
7 <script>
8 export default {
9 name: 'father',
10 // props: ['name'], 1.props的第一种写法
11 // props: {2.props的第二种写法
12 // name: Array
13 // },
14 props: {3.props的第三中写法(推荐)
15 name: {
16 type: String
17 }
18 },
19 data () {
20 return {
21 msg: '我是children的数据'
22 }
23 }
24 }
25 </script>
1 2.子->父组件通讯
2
3 一般子->父组件通讯是通过Events事件进行值得传递
4
5 父组件
6 <template lang="pug">
7 .father
8 Children(@hand='hand') //自定义事件1 </template>
9
10 <script>
11 import Children from './Children'
12 export default {
13 name: 'father',
14 data () {
15 return {
16 msg: '我是father的数据'
17 }
18 },
19 components: {
20 Children
21 },
22 methods: {
23 hand (msg) {
24 alert(msg)//拿到子组件传递的值
25 }
26 }
27 }
28 </script>
1 子组件
2 <template lang="pug">
3 .children
4 input(type='button' value='clickMe' @click='handle')
5 </template>
6
7 <script>
8 export default {
9 name: 'children',
10 data () {
11 return {
12 msg: '我是children的数据'
13 }
14 },
15 methods: {
16 handle () {
17 this.$emit('hand', this.msg) //发送事件名+传递的值
18 }
19 }
20 </script>
3.兄弟组件通讯
由上可知，父子组件通讯都会有一个媒介，相当于一个传递信息的介质，才可以使得数据传递过去。兄弟组件通讯业需要一个介质，我们通常称之为事件线~
1.创建一个组件 名字：eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下
1 import Vue from 'vue'
2 export default new Vue()
2.创建第一个兄弟组件,名字：Emit
1 <template lang="pug">
2 .emit
3 .box Emit组件a
4 button(@click='show') 向on组件传值
5 </template>
6
7 <script>
8 import bus from '../assets/eventBus'
9 export default {
10 methods: {
11 show () {
12 bus.$emit('user', 'haha')
13 }
14 }
15 }
16 </script>
3.创建第二个兄弟组件，名字：On
1 <template lang="pug">
2 .on
3 .cont 接受emit组件的数据:{{msg}}
4 </template>
5
6 <script>
7 import bus from '../assets/eventBus'
8 export default {
9 data () {
10 return {
11 msg: 'on'
12 }
13 },
14 mounted () {
15 let self = this
16 bus.$on('user', (msg) => {
17 self.msg = msg
18 })
19 }
20 }
21 </script>
在vue中常用的传值方式也就是这三种，但方放不局限于这三种。
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- VUE中的子父组件、兄弟组件之间相互传值，相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
- Vue父组件传递异步获取的数据给子组件
问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...
随机推荐- Ques前端组件化体系
Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点 无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件 我们期望能以MV*的方式去 ...
- HDOJ2006求奇数的乘积
求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- animate基础
用JQUERY做动画是很方便的,已经看过大牛们做出不逊色于FLASH的各种效果. 其中的基本功就有animate这个方法的使用.于是,从零开始,训练基本功: <body> <div ...
- yum仅下载RPM包不安装
http://www.ttlsa.com/linux/howto-yum-download-rpm-without-install/
- Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
- Java Map 及相应的一些操作总结
Map是我们在开发的时候经常会用到的,大致有以下几个操作,其中putAll方法是针对集合而言的操作,故不再进行说明,下面请看一下常用的知识点吧,尤其是keySet和Values两个方法及相应值的获取方 ...
- python3安装lxmlpipinstall安装失败解决办法
最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...
- Kalman Filters
|—定位—|—蒙特卡洛方法(定位自身) | |—卡尔曼滤波器(定位其他车辆) |—高斯函数 |—循环两个过程—|—测量(测量更新) | ...
- element-ui el-input只显示下划线
只需要增加样式 .el-input__inner { width: 220px; border-top-width: 0px; border-left-width: 0px; border-right ...
- 如何使用NSDL玩转微信跳一跳
目前网上介绍windows和IOS操作系统上玩微信跳一跳的有很多文章,但介绍Linux平台下的文章相对较少,所以动手操作下和大家分享,同时感谢wangshub在github上的分享: 1 下载wech ...
Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点 无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件 我们期望能以MV*的方式去 ...
求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
用JQUERY做动画是很方便的,已经看过大牛们做出不逊色于FLASH的各种效果. 其中的基本功就有animate这个方法的使用.于是,从零开始,训练基本功: <body> <div ...
http://www.ttlsa.com/linux/howto-yum-download-rpm-without-install/
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
Map是我们在开发的时候经常会用到的,大致有以下几个操作,其中putAll方法是针对集合而言的操作,故不再进行说明,下面请看一下常用的知识点吧,尤其是keySet和Values两个方法及相应值的获取方 ...
最近在学习python爬虫技术,lxml模块拥有很强大的获取元素功能,但是安装时总超时报错,如下解决办法 选择好python版本→注意pip版本→下载对应lxml.whl→键入对应的字符串→bingo ...
|—定位—|—蒙特卡洛方法(定位自身) | |—卡尔曼滤波器(定位其他车辆) |—高斯函数 |—循环两个过程—|—测量(测量更新) | ...
只需要增加样式 .el-input__inner { width: 220px; border-top-width: 0px; border-left-width: 0px; border-right ...
目前网上介绍windows和IOS操作系统上玩微信跳一跳的有很多文章,但介绍Linux平台下的文章相对较少,所以动手操作下和大家分享,同时感谢wangshub在github上的分享: 1 下载wech ...
