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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
基于PHP文件操作的详解
2013/06/05 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue中element 上传功能的实现思路
2018/07/06 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
中学生校园广播稿
2014/01/16 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
护士个人自我鉴定
2014/03/24 职场文书
学习之星事迹材料
2014/05/17 职场文书
幼师求职自荐信
2014/05/31 职场文书