关闭

父组件与子组件的通信

标签: Vue组件通信父组件子组件
109人阅读 评论(0) 收藏 举报
分类:

首先我们得弄清楚什么是父组件什么是子组件,我们从下面的例子中来了解

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

父组件:my-component

子组件:template


父组件向子组件通信

我们需要用到props

<my-component idx="父组件想要给子组件传递的内容"></my-component>
Vue.component('my-component', {
  props: ['idx'],//将idx设置为自定义属性
  template: '<div>A custom component!{{idx}}</div>'//将idx的内容加在子组件后面
})

子组件想父组件通信

我用的例子是Vue官网上的例子,需要用到$emit().

了解官方详情$emit()

<div id="counter-event-example">
   <p>{{ total }}</p>
   <button-counter v-on:increment="incrementTotal"></button-counter><!--@-->
   <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
//一个组件相当于一个Vue实例,实例里面有的内容,组件就能够有
//组件与实例的区别:1、组件中不用el,2、组件中的data必须是方法
Vue.component('button-counter', {
   template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
   data: function () {
      return {
          counter: 0
      }
   },
   methods: {
       incrementCounter: function () {
           this.counter += 1
           //子组件修改父组件内容,发射自定义事件
           this.$emit('increment')  //这里的increment与HTML中注释为@的对应
       }
   },
})
new Vue({
   el: '#counter-event-example',
   data: {
      total: 0
   },
   methods: {
      incrementTotal: function () {
          this.total += 1
      }
   }
})

运行结果:
这里写图片描述

0
0
查看评论

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

父组件传值到子组件注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据<privateScoreTop :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"&...
  • github_37847992
  • github_37847992
  • 2017-10-06 21:50
  • 530

【QT】父组件与子组件的相互通信例子(用signal-slot实现)

目标新建一个QMainWindow窗口,在该窗口中添加一个打开按钮,一个spinBox,点击打开按钮后弹出一个对话框,对话框里面有一个slider。改变slider后spinBox的值会改变,改变spinBox后slider的值会改变,变动值范围:0-130.实现后是下图这样的:代码在:【QT】父组...
  • shanchuan2012
  • shanchuan2012
  • 2017-02-22 20:13
  • 603

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一、父组件利用props往子组件传输数据 父组件: //注意传递参数时要用—代替驼峰命名,HTML不区分大小写 子组件: Vue.component('chil...
  • heshan1992
  • heshan1992
  • 2017-08-18 09:44
  • 207

ReactJS学习笔记(三)-父子组件间的通信

过去、现在、未来的每一天,组成了我们的故事。认真对待,都是美好的。 React组件间的通信分为三种情况:1、子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用;2、父组件调用子组件,采用refs的方式进行调用,需...
  • yf275908654
  • yf275908654
  • 2016-04-01 09:54
  • 10328

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

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读  ...
  • qq20004604
  • qq20004604
  • 2016-09-05 17:08
  • 10766

react native组件通信以及

react native 组件之间通信 父组件向子组件传递消息,数据通过对子组件的属性赋值来实现,如style属性等 子组件向父组件传递消息,消息通过回调父组件传递给自己的回调函数来实现。回调函数由父组件设置,被保存在子组件的某个属性中,等待需要向父组件传递消息的时机到来。如onchangeTe...
  • wallowyou
  • wallowyou
  • 2017-01-12 15:11
  • 236

React-Native学习十九:组件之间的通信-1

在编写React程序的时候,大家会遇到很多React组件之间的通信问题,主要分为以下3种: 1.父组件向子组件传值; 2.子组件向父组件传值; 3.没有任何嵌套的组件之间的传值(如兄弟组件之间传值)-后续章节介绍;
  • p106786860
  • p106786860
  • 2016-09-02 01:21
  • 6873

微信小程序框架wepy.js父子组件双向通信

propsfather.wpy<style lang="less"> .userinfo { display: flex; flex-direction: column; align-items: center; } .userinf...
  • kingov
  • kingov
  • 2017-11-06 14:07
  • 1104

Vue中子组件与父组件之间的双向绑定

这里写一个小的demo就是通过一个Button子组件实现value的加一减一,如图 首先给个根节点,id为app的div 首先全局注册组件my-com: Vue.component('my-com',{ template:'+1' }) ...
  • Miss_lu940112
  • Miss_lu940112
  • 2017-08-22 14:11
  • 204

react父组件与子组件进行通信

在使用react组件时,父子组件之间经常需要进行通信,那么是如何具体实现的呢? 如下:父组件:class Parent extends Component { constructor(props) { super(props); this.state...
  • M_Eve
  • M_Eve
  • 2017-11-23 12:02
  • 108
    个人资料
    • 访问:18415次
    • 积分:1279
    • 等级:
    • 排名:千里之外
    • 原创:112篇
    • 转载:7篇
    • 译文:1篇
    • 评论:1条
    文章分类
    最新评论