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>