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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 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/01 无线电
PHP新手上路(十二)
2006/10/09 PHP
第六节--访问属性和方法
2006/11/16 PHP
在PHP中使用模板的方法
2008/05/24 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
初识PHP中的Swoole
2016/04/05 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python的等深分箱实例
2019/11/22 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
本科生学习总结的自我评价
2013/10/02 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
招股说明书范本
2014/05/06 职场文书
死亡赔偿协议书
2015/01/28 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
入党函调证明材料
2015/06/19 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
详解Python中下划线的5种含义
2021/07/15 Python
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server