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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 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中目录,文件操作详谈
2007/03/19 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
SQL面试题
2013/04/30 面试题
中科方德软件测试面试题
2016/04/21 面试题
村委会贫困证明
2014/01/14 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
教师读书活动总结
2014/05/07 职场文书
员工工作自我评价
2014/09/26 职场文书
自我检讨报告
2015/01/28 职场文书
导游词之无锡古运河
2019/11/14 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
Python之matplotlib绘制折线图
2022/04/13 Python