vue2组件通信

1.父子组件通信

（1）.Props 和 Events：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。

示例：

父组件：

<template>
  <child-component :parentStrData="parStr" :parentArrData="parArr" :parentObjData="parObj" :parentFunction="parFun" @childHandle="getChildVal" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
      ChildComponent
  },
  data() {
    return {
      parMessage: '我是父组件的属性',
      parStr: 'hello word',
      parArr: [1，2，3],
      parObj: { name: '小明', age: 18 }
    }
  },
  methods: {
    getChildVal(message) {
      console.log('子级传递过来的值：',message) // 输出：子级传递过来的值：我是子组件的数据
      // 调用父组件方法 ...
    },
    parFun(){
        console.log("父组件把这个方法传入子组件中,在子组件里可以直接调用。")
    },

    getParent() {
        console.log('父组件方法');
    }
  }
}
</script>

子组件：

子组件主动获取父组件中的数据和方法

this.$parent.属性
this.$parent.方法

<template>
  <div @click="sendMessage">点击</div>
</template>

<script>
export default {
  props:{ // 对传过来的值 type类型进行限制，required代表是否必须传值。defalult是默认值
    parentStrData:{
        type: String,
        default: ( )=> ' '
    },
    parentArrData:{
        type: Array,
        default: ( )=> [ ]
    },
    parentObjData:{
        type: Object,
        default: ( )=> { }
    },
    parentFunction:{
        type : Function,
        default: null
    }
  }，
  data() {
    return {
      childData: '我是子组件的数据'
    }
  },
  methods: {
    sendMessage() {
      // 1. 使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。
      this.$emit('childHandle', childData)

     // 2. 父组件把方法传入子组件中,在子组件里直接调用。
      this.parentFunction() // 这个是来自父组件的方法，

     // 3. 直接在子组件中通过“this.$parent.event”来调用父组件的方法。
      this.$parent.getParent()
     // 直接在子组件中通过 "this.$parent.属性" 来调用父组件的属性
     // console.log('父组件的属性',this.$parent.parMessage)
    }
  }
}
</script>

在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 $emit。

（2）. $refs：使用ref属性获取子组件的实例，从而实现父组件和子组件之间的通讯。

示例:

父组件：(调用子组件的时候，定义一个ref)

父组件主动获取子组件中的数据和方法

this.$refs.refName.属性
this.$refs.refName.方法

<template>
  <div @click="sendMessage">点击</div>
  <child-component ref="childRef"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
      ChildComponent
  },
  data() {
    return {
      test: "旺旺"
  },
  methods: {
    sendMessage() {
      console.log('属性：', this.$refs.childRef.childMessage)
      this.$refs.childRef.getChildText() // '方法：', 
      // 输出： 我是子组件的属性 , 我是子组件的 getChildText方法
    }
  }
}
</script>

子组件：

<template>
  <div>
      {{ childMessage}}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      childMessage: "我是子组件的属性"
    }
  },
  methods: {
    getChildText(){
        console.log('我是子组件的 getChildText方法')
    }
  }
}
</script>

父组件主动获取子组件的数据，使用 $refs
this.$refs.name.属性
this.$refs.name.方法
子组件主动获取父组件的数据
this.$parent.数据
this.$parent.方法
以上这种方法可以改变父组件的数据。
比如 this.$parent.test=“www”，父组件的test就变成 www 了

【props和$refs之间的区别】

props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用 props。

$refs 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且 ref 用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

（3）. 未完待续... ...