vue.js $refs和$emit 父子組件交互

父調子 $refs （把父組件的數據傳給子組件） 

<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>

 

子調父 $emit (把子組件的數據傳給父組件)

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>