父调子 $refs (把父组件的数据传给子组件) 

<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>
子调父 $emit (把子组件的数据传给父组件)

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>

vue.js $refs和$emit 父子组件交互的更多相关文章

  1. vue的props和$emit / 父子组件通信

    props 父级: 父级组件中引用子组件,并将自己data下面的giveChild数据绑定在  giveChildData  传给子 <myChild :giveChildData=" ...

  2. 前端-Vue基础3(父子组件交互)

    1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...

  3. 在vue中使用setter改写父子组件传的值

    概述 最近在用muse ui的时候碰到一个问题,简单来说是这样的,父子之间传值,父组件和子组件使用相同的props命名,并且子组件不用emit,而用等号赋值. 最后使用计算属性的setter函数解决了 ...

  4. vue bus方式解决非父子组件间的传值

    对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...

  5. vue中\$refs、\$emit、$on的使用场景

    1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...

  6. 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...

  7. vue.js使用props在父子组件之间传参

    本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...

  8. vue中$refs、,$emit、$on

    $emit https://blog.csdn.net/sllailcp/article/details/78595077 $on https://www.jianshu.com/p/a544728b ...

  9. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

随机推荐

  1. 删数问题(NOI94)

    删数问题(NOI94) 输入一个高精度的正整数N,去掉其中任意S个数字后剩下的数字按原左右次序组成一个新的正整数.编程对给定的N和S,寻找一种方案使得剩下的数字组成的新数最小.输出新的正整数.(N不超 ...

  2. Android拦截外拨电话

    拦截监听外拨的电话,并进行处理: 向外拨打电话时系统会发出一个有序广播,虽然该广播最终会被拔号器里的广播接收者所接收并实现电话拔打,但我们可以在广播传递给拔号广播接收者之前先得到该广播,然后清除传递给 ...

  3. 系统空间占用排查 tomcat超大日志catalina.out 删除 与df 状态更新

    二.catalina.out占用多达60+G 并且其他诸如catalina.2016-03-29.log等具体日期的日志文件,个别的也有10G左右,直接删除这些大个头.df看稍有改善.针对catali ...

  4. ios 中sqlite的用法

    #import <sqlite3.h> @interface ViewController () { sqlite3 *_sqldb; } @end @implementation Vie ...

  5. grep 和 awk的buffer

    当使用 tail -f test.log | grep "mode" | awk '{print $5}'命令 或者 tail -f test.log | awk '/mode/ ...

  6. tensorflow内存溢出问题

    Tensorflow的静态图结构简洁清晰,符合人的思维.虽然编程上略微有些复杂,但是原理很容易看懂. Tensorflow分建图过程和运行图(张量求值)两个阶段,在这两个阶段中都可以定义操作和张量.但 ...

  7. linux shell 脚本攻略学习13--file命令详解,diff命令详解

    一.file命令详解 find命令可以通过查看文件内容来找出特定类型的文件,在UNIX/ Linux系统中,文件类型并不是由文件扩展名来决定的(windows中却正是这么做的),file命令的目的是从 ...

  8. 【Android】Android实现监听返回键,主键(HOME),菜单键

    目录结构: contents structure [+] 简介 监听 返回键 监听 主键(Home键) 监听 菜单键 一.简介 本篇文章介绍如何在Android中实现监听返回键,主键,菜单键.一般情况 ...

  9. 【Oracle】Oracle的内外连接

    目录结构: contents structure [+] Oracle的内外连接 内连接 等值连接 非等值连接 自连接 外连接 外连接的特点 如何实现外连接 SQL99的内外连接 SQL99的内连接 ...

  10. IDEA使用笔记(三)——小齿轮的显示和隐藏(Autoscroll from Source)

    在玩快捷键的时候,不清楚自己操作了什么,突然间发现——能直接定位到当前可编辑文件的哪个小齿轮,不见了,找了一会也没弄出来,从网上搜索吧!也没看到对应的方法,后来自己耐下心来复盘自己的操作,终于发现了, ...