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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
javascript系统时间设置操作示例
Jun 17 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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生成WAP页面
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php实现将Session写入数据库
2015/07/26 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery菜单插件用法实例
2015/07/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python 实现两个线程交替执行
2020/05/02 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
个人收入证明范本
2014/09/18 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
优秀教师推荐材料
2014/12/16 职场文书
建党伟业电影观后感
2015/06/01 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书