vue的组件之间传值方法
父组件
- <template>
- <div>
- 这是父组件
- <children v-bind:parentToChild="toChild" v-on:showChildMsg="formChild"></children>
- <!-- 使用vind:参数名 绑定传值,使用on:参数名 来监听接收子组件传来的信息-->
- {{showChildMsg}}
- </div>
- </template>
- <script>
- import children from "./children.vue";
- export default {
- name: "HelloWorld",
- data() {
- return {
- toChild:"父组件传值给子组件",
- showChildMsg:''
- };
- },
- methods: {
- formChild:function(data){
- //监听子组件子组件传值
- this.showChildMsg = data;
- }
- },
- components: { children }
- };
- </script>
- <style scoped>
- </style>
子组件
- <style scoped>
- /* css */
- </style>
- <template>
- <div class id>
- {{parentToChild}}
- <br/>
- <button @click="goParent">点击向父组件传值</button>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {};
- },
- methods: {
- goParent: function() {
- this.$emit("showChildMsg", "这是子组件传值给父组件");
- //子组件 通过$emit函数向父组件传值,这个showChildMsg参数名对应的就是父组件里面的v-on:showChildMsg参数名
- }
- },
- activated() {},
- props: ["parentToChild"]
- };
- </script>
vue的组件之间传值方法的更多相关文章
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- Vue 兄弟组件之间传递数值
Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...
- vue学习--组件之间的传值方式
1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- Vue父子组件相互传值及调用方法的方案
Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
随机推荐
- 自己用纯C++实现简单的QT中信号与槽机制
前天在我很久以前的一篇博文 (http://blog.csdn.net/liukang325/article/details/45742675) 中有人回复说看到我的博文很激动,希望我详细介绍一下信号 ...
- Redis的数据结构之字符串
五种数据类型: 字符串(String) 字符串列表(list) 有序字符串集合(sorted set) 哈希(hash) 字符串集合(set) Key定义的注意点: 不要过长, 不要过短, 统一的命名 ...
- for循环中break与continue的区别
1.for循环 for循环是更加简洁的循环语句,大部分情况下,for循环可以代替while循环.do-while循环. for循环的格式为: for( 初始语句 ; 执行条件 ; 增量 ){循环体}执 ...
- 外星人入侵——安装Pygame
本文以win10和Python3为例来介绍如何安装Pygame. 安装Pygame需要使用pip,我们首先检查pip是否已被安装. 打开一个终端窗口,并执行如下命令 C:\Users\hys>p ...
- Mac同时安装python2和python3
Mac同时安装python2和python3 Mac自带python2,但因为开发时所用但pythonkennel是3也可能是2,并且就算是python2,版本号也许和内置但python也有所不同.所 ...
- vue项目搭建步骤
https://blog.csdn.net/echo008/article/details/77099058 https://blog.csdn.net/echo008/article/details ...
- Linux更新时,出现无法更新锁
1.查看软件中心是否有更新 2.重启 3.rm/var/lib/dpkg/lock 4.sudo apt-get update 5.sudo dpkg --configure -a
- upload-labs
upload-labs是一个和sqli-labs类似的靶场平台,只不过是一个专门学习文件上传的.整理的很好,虽然并不能将服务器解析漏洞考虑进去,但毕竟一个靶场不可能多个web容器吧,关键是思路很重要, ...
- 从Win32程序中的主函数中获取命令行参数
在标准C或者Win32控制台程序的main函数中,它们都有两个参数:"argc" 和 "argv",如下所示: int main(int argc, char ...
- 使用rander() 将后台的数据传递到前台界面显示出来
1.创建templates文件夹 2.在该文件夹内创建html界面a.html 3.views.py: def a(request): love='iloveyou' return render(re ...