父调子 $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. 7、java5线程池之单一线程池newSingleThreadExecutor

    JDK文档说明: 创建一个使用单个 worker 线程的 Executor,以无界队列方式来运行该线程.(注意,如果因为在关闭前的执行期间出现失败而终止了此单个线程,那么如果需要,一个新线程将代替它执 ...

  2. DUBBO本地搭建及小案例 (转)

    DUBBO的介绍部分我这里就不介绍了,大家可参考官方文档. DUBBO的注册中心安装 DUBBO的注册中心支持好几种,公司用到zookeeper注册中心,所以我这边只说明zookeeper注册中心如何 ...

  3. Fiddler配置https

    问题描述: fiddler加载认证不成功... 问题解决: 手工生成认证证书 00.配置HTTPS 01.勾选https 02.添加ssh认证 11. 找到fiddler的安装目录 手工生成认证秘钥 ...

  4. Liability

    Liability li·a·bil·i·ty  ˌlīəˈbilədē/   noun A person or thing whose presence or behavior is likely ...

  5. Arduino的光敏传感器和超声波测距传感器测试代码

    光敏传感器测试代码 使用的是一个未知名4pin模块, 4pin依次为Vcc, Gnd, DO, AO, 板载一个可调电阻以及一个LED, 调节电阻大小, 可以控制LED亮灭和DO输出变化对光亮的灵敏度 ...

  6. lua一些特殊函数说明

    setclLvalue(L, L->top, cl); 这是个宏展开是这样: ((L->top)->value_).gc = obj2gco(cl); //top valud gc ...

  7. linux shell 脚本攻略学习3

    1.Bash中的READ命令 #读取n个字符存入变量 read -n number_of_chars variable_name 示例: amosli@amosli-pc:~$ read -n var ...

  8. 工程部署从tomcat6.0迁移到jboss6.0错误总结

    2014-11-08 内容存档在evernote,笔记名"工程部署从tomcat6.0迁移到jboss6.0错误总结"

  9. 【Algorithm】自底向上的归并排序

    一. 算法描述 自底向上的归并排序:归并排序主要是完成将若干个有序子序列合并成一个完整的有序子序列:自底向上的排序是归并排序的一种实现方式,将一个无序的N长数组切个成N个有序子序列,然后再两两合并,然 ...

  10. numpy 基于现有数据创建ndarray(from existing data)

    1 numpy.array array(object[, dtype=None, copy=True, order='K', subok=False, ndmin=0]) 2 numpy.asarra ...