vue.js $refs和$emit 父子组件交互的方法


Posted in Javascript onDecember 20, 2017

本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码:

<strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template>
 <div id="app">
  <input type="button" name="" id="" @click="parentCall" value="父调子" />
  <hello ref="chil" />//hello组件
 </div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
  parentCall () {


  this.$refs.chil.chilFn('我是父元素传过来的')

  }
  }
 }
</script>
/*Hello.vue :*/
<template>
 <div class="hello"></div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {

  chilFn (msg) {


  alert(msg)

  }
  }
 }
</script>
<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
//ps:App.vue 父组件
//Hello.vue 子组件
<!--App.vue :-->
<template>
<div id="app">


<hello @newNodeEvent="parentLisen" />

</div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue 是子组件传过来的值
    alert(evtValue)
   }
  }
 }
</script>
<!--Hello.vue :-->
<template>

<div class="hello">


<input type="button" name="" id="" @click="chilCall()" value="子调父" /> 

</div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
   chilCall(pars) {
    this.$emit('newNodeEvent', '我是子元素传过来的')
   }
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 #Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 #Javascript
详解vue mixins和extends的巧妙用法
Dec 20 #Javascript
canvas轨迹回放功能实现
Dec 20 #Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 #Javascript
You might like
php数组中删除元素的实现代码
2012/06/22 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python中黄金分割法实现方法
2015/05/06 Python
Python下载网络小说实例代码
2018/02/03 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
会计辞职信范文
2014/01/15 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
利群广告词
2014/03/20 职场文书
信用卡工资证明格式
2014/09/13 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
地球一小时活动总结
2015/02/27 职场文书
食堂管理制度范本
2015/08/04 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
使用Ajax实现无刷新上传文件
2022/04/12 Javascript