算是初学vue,整理一下父子组件通信笔记。

父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

一、父组件向子组件下发数据:

1.在子组件中显式地用props选项声明它预期的数据;

  1. Vue.component('child', {
  2. // 声明 props
  3. props: ['message'],
  4. // 就像 data 一样,prop 也可以在模板中使用
  5. // 同样也可以在 vm 实例中通过 this.message 来使用
  6. template: '<span>{{ message }}</span>'
  7. })

2.在父组件模板中通过子组件声明的props数据向子组件发数据;

  1. // 此处通过message向子组件下发消息
    <child message="hello!"></child>

二、子组件向父组件发送消息

1.父组件模板中使用 $on(eventName) 监听事件(注:不能用 $on 监听子组件释放的事件,而必须在模板里直接用 v-on 绑定);

2.子组件中使用$emit(eventName, optionalPayload) 触发事件

  1. <div id="message-event-example" class="demo">
  2. <p v-for="msg in messages">{{ msg }}</p>
  3. // 父组件模板中使用子组件,通过v-on监听子组件触发的事件
  4. <button-message v-on:message="handleMessage"></button-message>
  5. </div>
  6. Vue.component('button-message', {
  7. template: `<div>
  8. <input type="text" v-model="message" />
  9. <button v-on:click="handleSendMessage">Send</button>
  10. </div>`,
  11. data: function () {
  12. return {
  13. message: 'test message'
  14. }
  15. },
  16. methods: {
  17. handleSendMessage: function () {
  18. // 使用$emit触发事件,传入载荷数据
  19. this.$emit('message', { message: this.message })
  20. }
  21. }
  22. })
  23.  
  24. new Vue({
  25. el: '#message-event-example',
  26. data: {
  27. messages: []
  28. },
  29. methods: {
  30. handleMessage: function (payload) {
  31. // 使用载荷数据(payload)
  32. this.messages.push(payload.message)
  33. }
  34. }
  35. })

注:以上内容来源于Vue.js官方学习教程。初学vue,根据自己的理解整理,如有错误,欢迎交流纠正。

vue 父子组件通信的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  3. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  4. vue父子组件通信

    一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...

  5. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  6. beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...

  7. vue父子组件通信传值

    父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...

  8. Vue 父子组件通信入门

    父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...

  9. vue 父子组件通信-props

    父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...

随机推荐

  1. 我是如何通过学习拿到年薪80w

    本人做了5年Java,如今还是一个码农,天天写业务代码,直到2018年10月中旬遇到一位技术大牛,他给我一套技术思维导图让我又看到了希望!今天分享给各位想要提升.升职.加薪的你. 普通Java程序员与 ...

  2. Android中的Context(一)

    Android中的Context(一) 在Android开发中,Context可以说是我们接触地非常多的一个概念了,也译作"上下文",但是这个上下文到底是什么却并不好理解. 通俗的 ...

  3. Java实训:实训一 ——长春职业技术学院 16级网络工程

    Java实训:实训一 本文会解释一些设计思路. 想看具体过程,请转:https://www.cnblogs.com/lxwlxw/p/10114187.html 笑维的码云项目命名不太对,所以我来:h ...

  4. 表单传参,在action中的参数得不到

    写上面这个的时候,发现传过去的url路径是这样的 在action后面的pro=login得不到. 只需要将method中的get改成post就可以了

  5. java 的序列化与反序列化

    前言: 一直很不理解java的序列化的概念,为什么java对象的序列化要实现 Serializable的接口?或者要实现Externalizable的接口?而且Externalizable 的父类还是 ...

  6. 安装vue脚手架和vue安装element-ui

    首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.

  7. django之CSRF

    在POST请求到达views之前,csrf帮我们进行一层验证 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. Dangerous well

    Firsttime to develop games throuth Unity3d, such a great platform! You can build your games more qui ...

  9. 丰富的else语句以及简介的with语句

    1.if···else略 2.while.for与else Python中的循环语句(无论是while 还是for)中,经常配合continue和break语句,此时,可以和else搭配使用,当循环正 ...

  10. 一个简单的java程序,用于RabbitMQ日志监控

    RabbitMQ的所有日志,都会发给topic类型的exchange “amq.rabbitmq.log”  routingKey 有 debug,info,waring,error.  如果接收所有 ...