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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
小程序和web画三角形实现解析
Sep 02 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生成Flash动画的实现代码
2010/03/12 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
Javascript实现字数统计
2015/07/03 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python数据存储之 h5py详解
2019/12/26 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
四议两公开实施方案
2014/03/28 职场文书
遗产继承公证书
2014/04/09 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
学生会部长竞选稿
2015/11/19 职场文书
银行求职信怎么写
2019/06/20 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技