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(),子组件像父组件传值得过程。

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文...

vue-子组件向父组件传值

子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 Do you like me? {{childWords}} methods: { ...

Vue2.0 子组件传值给父组件

this.$emit(event,...args); /* * event: 要触发的事件 * args: 将要传给父组件的参数 */ Usage: 子组件内容: methods:{ ...

前端框架Vue(8)——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。  *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲)  首先讲一下遇到的 需求背景: 解释一下:   组件之间的关系: ...
  • DOCALLEN
  • DOCALLEN
  • 2017年04月14日 15:26
  • 10255

Vue2.0子父组件通信

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

Vue2.0子父组件通信

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

Vue2.0子父组件通信

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

vue 父组件和子组件的通信

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

Vue中父组件向子组件通信

props组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props看下面的例子 ...

vue2中(路由/父子/组件/事件)数据通信方法总结

vue2中(路由/父子/组件/事件)数据通信方法总结
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue 父组件与子组件相互通信
举报原因:
原因补充:

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