父组件

<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的组件之间传值方法的更多相关文章

  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. 深度学习基础(三)NIN_Network In Network

    该论文提出了一种新颖的深度网络结构,称为"Network In Network"(NIN),以增强模型对感受野内local patches的辨别能力.与传统的CNNs相比,NIN主 ...

  2. asp.net NPOI导出xlsx格式文件,打开文件报“Excel 已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃”

    NPOI导出xlsx格式文件,会出现如下情况: 点击“是”: 导出代码如下: /// <summary> /// 将datatable数据写入excel并下载 /// </summa ...

  3. 【托业】toeic托业必背核心词汇_修正版

  4. (Detected problems with API compatibility(visit g.co/dev/appcompat for more info)

    在applicaiton里面加载这么一段代码: private void closeAndroidPDialog(){ try { Class aClass = Class.forName(" ...

  5. 一个少女心满满的例子带你入门canvas

    https://blog.csdn.net/sunshine940326/article/details/76572850 本文首发于我的个人博客:http://cherryblog.site/ gi ...

  6. 266B

    #include <stdio.h> #define MAXSIZE 1024 char que[MAXSIZE]; int main() { int n, t; scanf(" ...

  7. 【UML】NO.54.EBook.6.UML.2.002-【Thinking In UML 大象 第二版】- UML 核心元素

    1.0.0 Summary Tittle:[UML]NO.54.EBook.6.UML.2.002-[Thinking In UML 大象 第二版]- UML 核心元素 Style:DesignPat ...

  8. ignore_user_abort(true); set_time_limit(0);程序在本地测试可以一直运行,上传服务器只能运行10-15分钟

    当PHP运行在安全模式下时此函数无效.除了关闭安全模式或者在php.ini程序中修改最大运行时间没有其他办法让此函数运行. php.ini 中缺省的最长执行时间是 30 秒,这是由 php.ini 中 ...

  9. Spring框架的第三天

    ## Spring框架的第三天 ## ---------- **课程回顾:Spring框架第二天** 1. IOC的注解方式 * @Value * @Resource(name="" ...

  10. 关于mysql处理百万级以上的数据时如何提高其查询速度的方法

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...