父组件

  1. <template>
  2. <div>
  3. 这是父组件
  4. <children v-bind:parentToChild="toChild" v-on:showChildMsg="formChild"></children>
  5. <!-- 使用vind:参数名 绑定传值,使用on:参数名 来监听接收子组件传来的信息-->
  6. {{showChildMsg}}
  7. </div>
  8. </template>
  9.  
  10. <script>
  11. import children from "./children.vue";
  12. export default {
  13. name: "HelloWorld",
  14. data() {
  15. return {
  16. toChild:"父组件传值给子组件",
  17. showChildMsg:''
  18. };
  19. },
  20. methods: {
  21. formChild:function(data){
  22. //监听子组件子组件传值
  23. this.showChildMsg = data;
  24. }
  25. },
  26. components: { children }
  27. };
  28. </script>
  29.  
  30. <style scoped>
  31.  
  32. </style>

子组件

  1. <style scoped>
  2. /* css */
  3. </style>
  4. <template>
  5. <div class id>
  6. {{parentToChild}}
  7. <br/>
  8. <button @click="goParent">点击向父组件传值</button>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {};
  15. },
  16. methods: {
  17. goParent: function() {
  18. this.$emit("showChildMsg", "这是子组件传值给父组件");
  19. //子组件 通过$emit函数向父组件传值,这个showChildMsg参数名对应的就是父组件里面的v-on:showChildMsg参数名
  20. }
  21. },
  22. activated() {},
  23. props: ["parentToChild"]
  24. };
  25. </script>

vue的组件之间传值方法的更多相关文章

  1. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  2. Vue 兄弟组件之间传递数值

    Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...

  3. vue学习--组件之间的传值方式

    1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...

  4. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  5. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  6. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

  7. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  8. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  9. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

随机推荐

  1. 自己用纯C++实现简单的QT中信号与槽机制

    前天在我很久以前的一篇博文 (http://blog.csdn.net/liukang325/article/details/45742675) 中有人回复说看到我的博文很激动,希望我详细介绍一下信号 ...

  2. Redis的数据结构之字符串

    五种数据类型: 字符串(String) 字符串列表(list) 有序字符串集合(sorted set) 哈希(hash) 字符串集合(set) Key定义的注意点: 不要过长, 不要过短, 统一的命名 ...

  3. for循环中break与continue的区别

    1.for循环 for循环是更加简洁的循环语句,大部分情况下,for循环可以代替while循环.do-while循环. for循环的格式为: for( 初始语句 ; 执行条件 ; 增量 ){循环体}执 ...

  4. 外星人入侵——安装Pygame

    本文以win10和Python3为例来介绍如何安装Pygame. 安装Pygame需要使用pip,我们首先检查pip是否已被安装. 打开一个终端窗口,并执行如下命令 C:\Users\hys>p ...

  5. Mac同时安装python2和python3

    Mac同时安装python2和python3 Mac自带python2,但因为开发时所用但pythonkennel是3也可能是2,并且就算是python2,版本号也许和内置但python也有所不同.所 ...

  6. vue项目搭建步骤

    https://blog.csdn.net/echo008/article/details/77099058 https://blog.csdn.net/echo008/article/details ...

  7. Linux更新时,出现无法更新锁

    1.查看软件中心是否有更新 2.重启 3.rm/var/lib/dpkg/lock 4.sudo apt-get update 5.sudo dpkg --configure -a

  8. upload-labs

    upload-labs是一个和sqli-labs类似的靶场平台,只不过是一个专门学习文件上传的.整理的很好,虽然并不能将服务器解析漏洞考虑进去,但毕竟一个靶场不可能多个web容器吧,关键是思路很重要, ...

  9. 从Win32程序中的主函数中获取命令行参数

    在标准C或者Win32控制台程序的main函数中,它们都有两个参数:"argc" 和 "argv",如下所示: int main(int argc, char ...

  10. 使用rander() 将后台的数据传递到前台界面显示出来

    1.创建templates文件夹 2.在该文件夹内创建html界面a.html 3.views.py: def a(request): love='iloveyou' return render(re ...