父子组件通信与访问

主要就父子组件通信进行介绍

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、子组件向父组件传值

通过事件

二、父组件向子组件传值

通过props

父访问子-children-refs   重点

如果想要访问子组件中的方法和值，直接使用refs会更加的简洁，但是props和refs是有区别的，区别点见总结

使用方法如下：

1.在父组件中引用子组件

2.在父组件引用的子组件中添加 ref="aaa"  后期直接可以操作aaa

3.通过this.$refs取出子组件中需要的值

4.对取出的值可以进行操作，包括在父组件使用以及修改子组件中的值

//step1:
import children from  './children.vue'
export default{
    data(){
        return {
            message:''

        }
    },
//step1:
    components:{
        cpn:children
    },
//step2:
<cpn ref="aaa"></cpn>

methods:{
        btnClick(){
//step3&&step4：
         this.message = this.$refs.aaa.name
        }
    }

 子访问父-parent-root 了解，在开发中不建议使用

parent会导致子组件复用率不高，而且会导致其他的错误，root则是访问的vue实例

~使用方法：

  <Button @click="clickM">哈哈</Button>
    //在子组件的methods方法
//这里是调用父组件的方法，也可以调用父组件的data中的值
 clickM(){
            console.log(this.$parent)
            this.$parent.btnClick()
        }

由此可见，这里使用$parent可能对于以后的复用造成问题，因为其他地方的引用可能没有此方法，$root为vue实例

总结 

这些都是关于子父组件的内容，如果对于已经确定的公共数据，即不需要子父组件之间的操作，可以使用store直接存储，详细请见vuex

props 着重与数据传递, 父组件向子组件传递数据, 但是他并不能调用子组件里面的属性和方法。

$refs 着重与索引，主要用于调用子组件里面的属性和方法。并且当ref使用在DOM元素的时候, 能起到选择器的作用, 我们可以通过它能获取到DOM元素的节点, 可以对DOM元素进行操作等。