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模板语法)的更多相关文章

  1. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  2. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  3. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  4. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  5. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  6. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  7. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  8. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  9. Vue父组件传递异步获取的数据给子组件

    问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...

随机推荐

  1. Selenium学习之==>Css Selector使用方法

    一.什么是Css Selector Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器后,下载插件,FireFinder ...

  2. vue 中滚动div至最底部

    scrollToBottom: function () { this.$nextTick(() => { var container = this.$el.querySelector(" ...

  3. python基础:multiprocessing的使用

    不同于C++或Java的多线程,python中是使用多进程来解决多项任务并发以提高效率的问题,依靠的是充分使用多核CPU的资源.这里是介绍mulitiprocessing的官方文档:https://d ...

  4. RabbitMQ使用(上)

    1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方, ...

  5. 【VS开发】使用WinPcap编程(1)——获取网络设备信息

    pcap_if_t是一个interface数据结构,表明网络接口的信息.网络接口就是interface,就是我们用来上网的设备,一般为网卡,还有一些虚拟网卡也算作这样的接口.它的结构如下: struc ...

  6. 一个实用的iptables脚本(各种过滤写法参考)

    #!/bin/shmodprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t n ...

  7. [转帖]linux screen 命令详解,xshell关掉窗口或者断开连接,查看断开前执行的命令

    linux screen 命令详解,xshell关掉窗口或者断开连接,查看断开前执行的命令 https://binwaer.com/post/12.html yun install -y screen ...

  8. SELECT 与 SET给标量赋值

    本文转自 :https://blog.csdn.net/perddy/article/details/4033406 SQL Server推荐使用 SET 而不是 SELECT 对变量进行赋值.当表达 ...

  9. Tomcat 一台机器运行多个Tomcat

    转 https://www.cnblogs.com/andy1234/p/8866588.html 在一台Win10 PC 上面同时开启两个Tomcat系统为例. 1. 硬件环境 2. 到Tomcat ...

  10. js获取url中的参数(解决中文乱码)

    这个是封装好的方法: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...