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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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实现分页的一个示例
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
urllib2自定义opener详解
2014/02/07 Python
初步探究Python程序的执行原理
2015/04/11 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python gdal安装与简单使用
2019/08/01 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
怎么快速自学python
2020/06/22 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
实习单位证明范例
2014/11/17 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
导游词之凤凰古城
2019/10/22 职场文书