vue---父调子 $refs （把父组件的数据传给子组件）子调父 $emit (把子组件的数据传给父组件)

本文链接：https://blog.csdn.net/sinat_17775997/article/details/59478814

ps:App.vue 父组件
　 Hello.vue 子组件
 

App.vue  :

<template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父调子" />

<hello ref="chil" />

</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>
</div>
</template>

<script>
export default {
name: 'hello',
'methods': {

　　chilFn (msg) {
　　　　alert(msg)
　　}


}
}
</script>

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>