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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JavaScript对象原型链原理解析
Jan 22 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三维数组去重(示例代码)
2013/11/26 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
dojo 之基础篇
2007/03/24 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue实现分页栏效果
2019/06/28 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python实现飞机大战小游戏
2019/11/08 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
PHP面试题及答案二
2015/05/23 面试题
SQL面试题
2013/12/09 面试题
道德模范先进事迹
2014/02/14 职场文书
人资专员岗位职责
2014/04/04 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏