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>