本文介绍了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><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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。