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时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
随机推荐
- Visual Studio中配置Beyond Compare为版本比较工具
VS自带的合并工具并不理想,个人比较习惯Beyond Compare,这里替换成Beyond Compare,因为并不想改变所有的VS项目设置,这里以单个仓库项目为例,源代码管理器使用GIT 找到.g ...
- Interllij IDEA中启动web项目
1.在IDEA中打开你的Web应用,点击一下绿色三角形左边的框框,然后在弹出框上选择Edit Configurations,会弹出一个配置面板. 2.在弹出的面板中我们点击Defaults,然后找到T ...
- freeswitch报错
1. 2010-10-26 11:01:58.448513 [ERR] sofia_reg.c:816 Can not do authorization without a compl ...
- maven pom添加oracle11驱动
参考这篇文章 https://blog.csdn.net/youren_zt/article/details/60132324 OracleJDBC驱动包是需要Oracle官方授权才能被下载.mave ...
- iOS开发笔记错误集
错误类型列举 错误类型A:EXC_BAD_INSTRUCTION (code=EXC_I386_INVOP, subcode=0x0) 错误类型B:EXC_BREAKPOINT (code=EXC_A ...
- smartctl 检测磁盘信息
smartctl -i 指定设备 -d 指定设备类型,例如:ata, scsi, marvell, sat, 3ware,N -a 或A 显示所有信息 -l 指定日志的类型,例如:TYPE: err ...
- 压缩图片 Image
图片压缩 class resizeImg: """缩略图""" def __init__(self,**args): self.args_k ...
- 《CSS世界》读书笔记(四)--宽度分离
<!-- <CSS世界>张鑫旭著 --> CSS流体布局下的宽度分离原则 所谓“宽度分离原则”,就是CSS中的width属性不与影响宽度的padding/border(有时候包 ...
- D2欧拉路,拓扑排序,和差分约束
第一题:太鼓达人:BZOJ3033 题意:给出k,求一个最长的M位01串,使其从每一个位置向后走k个得到 的M个k位01串互不相同(最后一个和第一个相邻,即是一个环).输出 字典序最小的答案. 2 ≤ ...
- Spring 学习——Spring AOP——AOP概念篇
AOP AOP的定义:AOP,Aspect Oriented Programming的缩写,意为面向切面编程,是通过预编译或运行期动态代理实现程序功能处理的统一维护的一种技术 实现方式 预编译 Asp ...