vue父子组件互相传值 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


vue父子组件互相传值

2019-7-24 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

一、父组件给子组件传值

1、父组件调用子组件的时候,绑定动态属性

/*传值可以是值“title”、是方法“run”、是组件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子组件里面通过props接受父组件传过来的数据

<script>
    export default{
props:['title','run','home']
}
</script>

二、父组件主动获取子组件的数据和方法

1、调用子组件的时候定义一个ref

<v-header ref="header"></v-header>
1
2、在父组件里面通过以下方式获取属性和方法

this.$refs.header.属性
this.$refs.header.方法

三、子组件主动获取父组件的数据和方法

this.$parent.数据
this.$parent.方法

四、非父子组建传值

1、新建一个js文件 然后引入vue 实例化vue最后暴露这个实例

VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

2、在要广播的地方引入刚才定义的实例,并进行广播

home.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        methods:{
            emitNews(){
                /*广播数据*/
                VueEvent.$emit('to-news',this.数据)
            }
        }
}
</script>

3、在要接收数据的地方接受广播

news.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        /*在生命周期函数里写,编译的时候就调用*/
        mounted(){
            /*接受广播*/
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
}
</script>


标签: vue父子组件互相传值 « 用大数据告诉你什么样的图最受欢迎! | Bitmap三级缓存 和二次采样»


蓝蓝 http://www.bjhbys.com

  1. 2020年1月(11)
  2. 2019年12月(50)
  3. 2019年11月(61)
  4. 2019年10月(49)
  5. 2019年9月(48)
  6. 2019年8月(58)
  7. 2019年7月(58)
  8. 2019年6月(58)
  9. 2019年5月(31)
  10. 2019年4月(37)
  11. 2019年3月(43)
  12. 2019年2月(25)
  13. 2019年1月(45)
  14. 2018年12月(41)
  15. 2018年11月(40)
  16. 2018年10月(29)
  17. 2018年9月(40)
  18. 帝皇彩票官网2018年8月(87)
  19. 2018年7月(107)
  20. 2018年6月(86)
  21. 2018年5月(110)
  22. 2018年4月(40)
  23. 2018年3月(35)
  24. 2017年8月(35)
  25. 2017年7月(45)
  26. 2017年6月(7)
  27. 2017年5月(27)
  28. 帝皇彩票官网2017年4月(51)
  29. 2017年3月(70)
  30. 2017年2月(65)
  31. 2017年1月(69)
  32. 2016年12月(55)
  33. 2016年11月(111)
  34. 2016年10月(92)
  35. 2016年9月(53)
  36. 2016年8月(9)
  37. 2016年7月(4)
  38. 2016年6月(9)
  39. 2016年3月(19)
  40. 2016年2月(26)
  41. 2016年1月(30)
  42. 2015年12月(33)
  43. 2015年11月(35)
  44. 2015年10月(46)
  45. 2015年9月(43)
  46. 帝皇彩票官网2015年8月(40)
  47. 2015年7月(33)
  48. 2015年6月(46)
  49. 2015年5月(58)
  50. 2015年4月(70)
  51. 2015年3月(55)
  52. 2015年2月(17)
  53. 2015年1月(33)
  54. 2014年12月(21)
  55. 2014年11月(84)
  56. 2014年10月(94)
  57. 2014年9月(6)
  58. 2014年8月(1)
  59. 帝皇彩票官网2014年7月(13)
  60. 2014年6月(66)
  61. 2014年5月(99)
  62. 2014年4月(88)
  63. 2014年3月(102)
  64. 2014年2月(68)
  65. 2014年1月(83)
  66. 帝皇彩票官网2013年12月(106)
  67. 2013年11月(112)
  68. 2013年10月(61)
  69. 2013年9月(20)
  70. 2013年7月(13)
  71. 2013年6月(27)
  72. 2013年5月(48)
  73. 2013年4月(39)
  74. 2013年3月(8)
  75. 2013年2月(20)
  76. 2013年1月(31)
  77. 2012年12月(33)
  78. 2012年11月(31)
  79. 2012年10月(23)
  80. 2012年9月(8)
  81. 2012年7月(14)
  82. 2012年6月(15)
  83. 2012年5月(31)
  84. 2012年4月(24)
  85. 2012年2月(4)
  86. 2012年1月(8)
  87. 2011年12月(35)
  88. 2011年11月(32)
  89. 2011年10月(13)
  90. 2011年8月(1)
  91. 2011年6月(1)
订阅Rss
桔子彩票注册 大乐购彩票计划群 山东11选5计划 博发彩票开户 上海11选5分布走势图 吉利彩票投注 吉利彩票登陆 状元彩票开奖 吉林快3开奖 新疆喜乐彩走势图