获取vue组件数据

可以通过this.$parent.XX，或者this.$children[0].XX，快速获取到父组件或者子组件的数据。但是需要注意的是，获取子组件的数据中，是一个数组，因为儿子可有多个。

还可以通过this.refs.XX，快速获取到子组件的属性，这个方法还可以直接操纵dom元素，贴近于原生的js更改dom属性。

parent代码：

<template>
    <div>
        <h3>parent： 获取vue组件数据</h3>
        <p>我自己的数据info:{{ info }}</p>
        <button @click="getsonData">获取son数据</button>
        <p>get son 的数据：{{ getsonDatas }}</p>
        <hr>
        <son></son>
    </div>
</template>

<script>
import son from './son.vue';
export default {
    components:{
        son
    },
    data(){
        return{
            info:"我是parent中的数据",
            getsonDatas:""
        }
    },
    methods:{
        getsonData(){
            this.getsonDatas = this.$children[0].sonData
        }
    }
}
</script>

<style>

</style>

son代码

<template>
    <div>
        <h4>son: 获取到父组件数据：{{ info }}</h4>
        <h4>我自己的数据:{{ sonData }}</h4>
        <button @click="getData">获取父组件的数据</button>
        <button @click="changeData">change父组件的数据</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            info:" ",
            sonData:"little son data"
        }
    },
    methods:{
        getData(){
            this.info = this.$parent.info
        },
        changeData(){
            this.$parent.info = "这就被修改了？？？no..."
            this.getData()
        }
    }
}
</script>

<style>

</style>

实现效果：