本文介紹了vue.js $refs和$emit 父子組件交互的方法，分享給大家，廢話不多說直接看代碼：

<strong>父調(diào)子 $refs （把父組件的數(shù)據(jù)傳給子組件） </strong><br><br><template> <div id="app">  <input type="button" name="" id="" @click="parentCall" value="父調(diào)子" />  <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>子調(diào)父 $emit (把子組件的數(shù)據(jù)傳給父組件)</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="子調(diào)父" /> 　　</div></template><script> export default {  name: 'hello',  'methods': {   chilCall(pars) {    this.$emit('newNodeEvent', '我是子元素傳過來的')   }  } }</script> 

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。