vuejs中父子组件之间通信方法实例详解


Posted in Javascript onJanuary 17, 2020

本文实例讲述了vuejs中父子组件之间通信方法。分享给大家供大家参考,具体如下:

一、父组件向子组件传递消息

// Parent.vue

<template>
 <div class="parent">
  <v-child :msg="message"></v-child>
 </div>
</template>
<script>
 import VChild from './child.vue'
 export default {
  components: {
   VChild
  },
  data () {
   return {
    // 父组件将message作为参数传入子组件中
    message: '来自父组件消息'
   }
  }
 }
</script>
// Child.vue
<template>
 <div class="child">
  <h1>child</h1>
  <p>{{ msg }}</p>
 </div>
</template>
<script>
 export default {
  // 通过props定义外部系统可以传入的参数
  // 定义了一个msg变量,类型是String,默认是空字符串
  props: {
   msg: {
    type: String,
    default: ""
   }
  }
 }
</script>
// router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Parent from '@/test/Parent'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/parent',
   component: Parent
  }
 ]
})

二、子组件向父组件传递消息

// Parent.vue

<template>
 <div class="parent">
  <v-child :msg="message" @childNotify="childNotify"></v-child>
 </div>
</template>
<script>
 import VChild from './child.vue'
 export default {
  components: {
   VChild
  },
  data () {
   return {
    // 父组件将message作为参数传入子组件中
    message: '来自父组件消息'
   }
  },
  methods: {
   childNotify (params) {
    console.log(params)
   }
  }
 }
</script>
// Child.vue

<template>
 <div class="child" @click="notifyParent">
  <h1>child</h1>
  <p>{{ msg }}</p>
 </div>
</template>
<script>
 export default {
  // 通过props定义外部系统可以传入的参数
  // 定义了一个msg变量,类型是String,默认是空字符串
  props: {
   msg: {
    type: String,
    default: ""
   }
  },
  methods: {
   notifyParent () {
    var params = {
     m: 1,
     n: 2
    }
    // 子组件以事件的形式通知父组件(需要使用$emit方法,第一个参数,事件名称;第二个事件附带的参数)
    this.$emit('childNotify', params)
   }
  }
 }
</script>

参考:https://jingyan.baidu.com/article/455a99505b639da1662778e1.html

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
js实现小星星游戏
Mar 23 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
JS实现transform实现扇子效果
Jan 17 #Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 #Javascript
Vue引入Stylus知识点总结
Jan 16 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
php实现插入排序
2015/03/29 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
JS控制表格隔行变色
2006/06/26 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
Python反射的用法实例分析
2018/02/11 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python中uuid模块实例浅析
2020/12/29 Python
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
应届生服务员求职信
2013/10/31 职场文书
三年级音乐教学反思
2014/01/28 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python