通过ref在父组件中调用子组件的数据，方法

    <div id="app">
        <input type="button" value="获取元素" @click="getElement">

        <h3 id="myh3" ref="myh3">Haha! The weather is very well!</h3>

        <hr>

        <login ref="myLogin"></login>
    </div>

    <template id="t1">
        <h1>登录组件</h1>
    </template>

    <script>
        var login = {
            template: '#t1',
            data() {
                son: 'age'
            },
            methods: {
                show() {
                    console.log('调用子组件的方法！');
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getElement() {
                    //document.getElementById()返回对拥有指定 id 的第一个对象的引用。
                    //innerHTML返回的是标签内的 html内容，包含html标签。
                    //innerText返回的是标签内的文本值，不包含html标签。
                    //console.log(document.getElementById('myh3').innerText)

                    //ref是英文单词reference 值类型和引用类型referenceError的缩写

                    //使用vm实例中的refs调用元素
                    //console.log(this.$refs.myh3.innerText)
                    //调用子组件的数据
                    //console.log(this.$refs.myLogin.son)
                    //调用子组件的数据方法
                    this.$refs.myLogin.show();
                }
            },
            components: {
                login: login
            }
        })
    </script>