vue 父子组件间通信

2018-04-15 admin

对于初学vue的同学,遇到的一个问题就是父子组件间如何通信。父组件调用一个子组件,父组件的属性如何能够传递给子组件使用,子组件里的数据如何能传递给父组件?下面我们通过一个demo来解答这个问题。

父组件

<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法,调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>

import Children from './children.vue'

export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },

  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说:{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

结果

总结

vue的父子组件间通信可以总结成一句话: 父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息,即 prop 向下传递,事件向上传递。

相关文章
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下: 方法一: 个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago 方法二: (通过freemarker模板)如...
2017-03-24
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
js实现温度计时间样式代码分享
这是一款基于js实现温度计时间样式代码,与我们见过的日期显示都不一样,很有创意,分享给大家学习学习 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的javascript实现温度计时间样式代码如下 &lt...
2017-03-29
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
使用javascript将时间转换成今天,昨天,前天等格式
方法超级简单,把时间格式化一下就好了,直接奉上代码 function transDate() { var $time =document.getElementById(&quot;share-time&quot;); var...
2017-03-25
JS中处理时间之setUTCMinutes()方法的使用
javascript Date.setUTCMinutes()方法按照通用时间设置分钟为一个指定日期。 语法 Date.setUTCMinutes(minutesValue[, secondsValue[, msValue]]) 注:括号...
2017-03-24
javascript实现相同事件名称,不同命名空间的调用方法
本文实例讲述了javascript实现相同事件名称,不同命名空间的调用方法。分享给大家供大家参考。具体实现方法如下: &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x...
2017-03-25
回到顶部