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子父组件通信

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,本篇文章主要来探讨一下Vue子父组件通信的问题。 搭建开发环境,官网上也有详细描述,在此不再赘述。

Vue2.0子父组件通信

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同...

vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信

作者:张飞翔 博客:https://fisher-zh.github.io/ 在Vue中,我们可以使用prop属性来进行父子组件间的通信,在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。...

vue.js父子组件通信动态绑定

<script src="https:

Vue兄弟组件之间的通信(EventBus)

在开发中,不可避免的要碰到需要兄弟组件之间相互通信的地方,在Vue的1.0版本中,我曾经采取的方式是通过两个兄弟组件的共同父级进行通信。主要用到$dispatch和$broadcast这两个方法。但在...

vue父子组件通信

组件通信 在实际开发过程中,子组件有时候需要通过使用父组件的数据来渲染页面;子组件数据的变化需要通知给父组件去做相应的变化,这就涉及到了父子组件之间的通信

vue 父子组件通信

父子组件通信 父链子组件可以用 this.parent访问它的父组件。根实例的后代可以用this.parent 访问它的父组件。根实例的后代可以用 this.root 访问它。父组件有一个数组 th...

Vue入门 - 组件通信

1 父子组件通讯 先触发子组件的mounted钩子,再触发父组件的mounted钩子。 1.1 子组件向父组件传递数据 子组件中调用this.$emit([自定义事件:string],[传出数据])。...

Vue父子组件通信实践

1、父组件通知子组件 2、子组件通知父组件

Vue2.0组件通信(非Vuex)

叙 最近学了Vue2.0,写写自己的一点总结,关于父子组件通信的,这点对于我来说,是看文档的时候比较难理解的。通过网上找资料和实践,也有一点理解。 例子使用以下代码模板 script src="...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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