vue 父组件与子组件相互通信

原创 2017年10月06日 21:50:58

父组件传值到子组件

注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop>

msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量,
子组件接收:

export default{
  data(){
  },
  mothods:{
  },
 mounted (){

  },
 props:["msg"]

}

通过props接收到msg属性值,在子组件里通过msg渲染数据,

<span>{{msg}}</span>

子组件传值到父组件

在子组件里

export default{
    methods: {
          onfilter(){
             this.$emit("listenTochildEvent","browse");
          },
          }
}

在父组件:

<privateScoreTop  :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"></privateScoreTop>

 showMessageFromChild(data){
        alert(data);
     }

通过this.$emit(),子组件像父组件传值得过程。

版权声明:本文为博主原创文章,转载请注明出处。

vue2.0父子组件以及非父子组件如何通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: //这里必须要用 - 代替驼峰 data(){ return { msg:...
  • mr_fzz
  • mr_fzz
  • 2017年01月20日 23:46
  • 50649

vue 子组件调用父组件方法

父组件vue privateScoreTop :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"> privateScore...
  • github_37847992
  • github_37847992
  • 2018年02月01日 10:19
  • 14

Vuejs——(10)组件——父子组件通信

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文...
  • qq20004604
  • qq20004604
  • 2016年09月05日 17:08
  • 10766

vue的组件间通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现2.子组件传递数据给父组件那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时...
  • caoxinhui521
  • caoxinhui521
  • 2017年08月29日 21:30
  • 218

vue+ElementUI实现订单页动态添加产品效果

使用vue2.0(ElementUI基于vue2.0)+ElementUI*(饿了么出品*)实现的在订单页面动态添加产品的效果,并自动计算总价。代码直接保存即可查看效果。...
  • henu2009220176
  • henu2009220176
  • 2016年11月29日 17:26
  • 15733

vue + elementUI++Vue常见的坑

此项目主要是列举平时遇见的问题的一些解决方案,后续开发直接引用就行&&参考就行 module.vue是模板结构,新建.vue文件时复制粘贴,项目开发完成删除即可 模板是在vue-cli 脚手架的基...
  • H5_FK
  • H5_FK
  • 2017年09月11日 15:25
  • 1826

Vue.js 父子组件通讯

vue.js,是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。(这是官方的一个解释!) 小编没使用过angularjs,也没...
  • wxc_niuniu
  • wxc_niuniu
  • 2016年09月05日 16:41
  • 4593

Vue2.0子同级组件之间数据交互

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录。 Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述。 使用NPM及相关命令行工具初始化的Vue工程...
  • wang_meiwei
  • wang_meiwei
  • 2017年07月23日 22:03
  • 6516

vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)

  • yu2015java
  • yu2015java
  • 2017年09月04日 19:29
  • 222

组件与组件之间的通信以及vue2.0中的变化、示例

一、开始第一个DEMO,其中一个功能需求--组件与组件之间作用域里,但又需要传递数据。 例如:App.vue为父组件,有子组件A.vue、B.vue 1.App的数据传递给A、B 2.A、B的数据传递...
  • qq_24122593
  • qq_24122593
  • 2016年12月07日 18:53
  • 13033
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue 父组件与子组件相互通信
举报原因:
原因补充:

(最多只允许输入30个字)