vue.js $refs和$emit 父子组件交互

父调子 $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 父子组件交互相关推荐

vue父组件、子组件，父子组件交互
Vue父组件调用子组件事件,父子组件交互 vue2 vue父组件向子组件传递数据 or 调用事件父组件传递数据到子组件 props 传递: <child-c :args="args& ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
Vue入门八、非父子组件间通讯
通过Bus总线机制实施非父子组件通讯 1.创建一个空实例(Bus中央事件总线也可以叫中间组件) 2.利用$emit $on 触发和监听事件实现非父子组件的通信组件之间使用this.$bus.$on传 ...
【视频】vue组件之$emit父子组件间值的传递
Vue.js 从入门到真精通视频合集 https://www.bilibili.com/video/av91679349?p=10
使用Vue.js进行数据绑定以及父子组件传值
最近准备快速复习一下Vue,做几个小DEMO来复习一下写个todolist 使用v-model进行数据的双向绑定,当input里面的内容发生变化,vue实例里的inputValue也发生变化,同理当 ...
vue小例子-单位换算-父子组件通信
写了差不多三小时,还好,没出什么大bug,基本实现了单位换算,大问题没有,小问题不管. 和前面的例子一样,直接全部复制保存成html页面,就能打开 <!DOCTYPE html> < ...
vue中iframe嵌套页面父子组件互相通信
//父传子页面 <iframe id="mainIframe" name="mainIframe" ref="iframe" :src ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果
文章目录一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...

vue.js $refs和$emit 父子组件交互

vue.js $refs和$emit 父子组件交互相关推荐

最新文章

热门文章