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 相关文章推荐
javascript while语句和do while语句的区别分析
Dec 08 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php加密解密字符串示例
2016/10/13 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
python中__slots__用法实例
2015/06/04 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
对Python 内建函数和保留字详解
2018/10/15 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
医学生自荐信
2013/12/03 职场文书
高中课程设置方案
2014/05/28 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2019财务转正述职报告
2019/06/27 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
MySQL分区表管理命令汇总
2022/03/21 MySQL
Python自动化实战之接口请求的实现
2022/05/30 Python