vue.js $refs和$emit 父子组件交互的方法
2017-12-20 10:08
996 查看
本文介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue.js $refs和$emit 父子组件交互
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- vuejs组件交互 - 01 - 父子组件之间的数据交互
- vuejs父子组件之间数据交互详解
- Vue.js之父子组件
- Vue.js路由组件vue-router使用方法详解
- Vue.js路由组件vue-router的使用方法
- vue.js学习笔记(三)--父子组件通信总结
- vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
- Vue 进阶教程之:非父子组件通信方法(非Vuex)
- Vue $emit $refs子父组件间方法的调用
- vue.js使用props在父子组件之间传参
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
- 父子组件通信vue.js
- vue.js父子组件通信动态绑定
- Vue.js 父子组件通讯开发实例
- Vue通过ref父子组件拿值方法
- vue 父子组件通讯--props,refs(muse-ui,vue.js2.0)
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程