vue父子组件通信（props、$refs 、 $emit、$parent、$children、$root）

Vue组件间的通信非常重要下面一起学习吧！

之前写过一篇refs的父组件控制子组件的文档，现在做个通信的总结，做人开发笔记使用！

props，$emit是子父组件传值的方法：

<template>
<!-- 子组件 -->
  <div>{{text}}</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props:['text'],  //第一种形式
// props: {    //第二种形式
  //   text: {
  //     type: [String, Number],   // 传值的类型
  //     default: 0   // 设置的默认值
  // },
// },
// props: {
    //     text: Array  //第三种形式
// },
  data() {
    return { }
  },
  methods: {
	show() {
		this.$emit('down','aaaaa')
	}
  }
})
</script>

<!-- 父组件 -->
<template>
  <div class="parent">
    <child @down='do' :text="a"></child>
  </div>
</template>
 
<script>
    export default {
        data(){
          return {
          	a: 123
          }
        },
        methods:{
            do(a) {
               console.log(a)
            }
        },
        components:{
            child
        }
    }
</script>

父向子 通过 $ref 获取子组件数据 调用子组件方法

<template>
<!-- 子组件 -->
  <div>{{text}}</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
			text: 1
	 }
  },
  methods: {
	show() {
		console.log('我是子组件')
	}
  }
})
</script>

<!-- 父组件 -->
<template>
  <div class="parent">
    <child ref=child"></child>
  </div>
</template>
 
<script>  
    export default {
        data(){
          return {
          }
        },
        methods:{
            do(a) {
               this.$refs.child.show()    // 调用子组件方法
               this.$refs.child.text = 2   // 改变子组件数据
            }
        },
        components:{
            child
        }
    }
</script>

** $children 获取子组件数据和调用子组件方法**

<!-- 父组件 -->
<template>
  <div class="parent">
    <child></child>
  </div>
</template>
 
<script>  
    export default {
        data(){
          return {
          }
        },
        methods:{
            do(a) {
               this.$children[0].show()    // 调用子组件方法   $children获取的是父组件的直接子组件数组，不获取孙组件
               this.$children[0].text = 2   // 改变子组件数据
            }
        },
        components:{
            child
        }
    }
</script>

子向父 父组件把方法传入子组件中 在子组件里直接调用这个方法

<template>
<!-- 子组件 -->
  <div>{{text}}</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
 props: {   
	down: {
	     type: Function,   // 传值的类型
	    default: 0   // 设置的默认值
	},
  },
  data() {
    return { }
  },
  methods: {
	show() {
		this.down()
	}
  }
})
</script>

<!-- 父组件 -->
<template>
  <div class="parent">
    <child @down='do'></child>
  </div>
</template>
 
<script>
    export default {
        data(){
          return {
          }
        },
        methods:{
            do(a) {
               console.log(a)
            }
        },
        components:{
            child
        }
    }
</script>

$parent 获取父组件数据和调用父组件方法

<template>
<!-- 子组件 -->
  <div>{{text}}</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return { }
  },
  methods: {
	show() {
		this.$parent.do(3)   // 获取到的是直属父组件
		this.$parent.b = 2
	}
  }
})
</script>

<!-- 父组件 -->
<template>
  <div class="parent">
    <child></child>
  </div>
</template>
 
<script>
    export default {
        data(){
          return {
          		b: 1
          }
        },
        methods:{
            do(a) {
               console.log(a)
            }
        },
        components:{
            child
        }
    }
</script>

$root 获取最高层的父组件及app.vue

使用this.$root可以访问app.vue的方法和数据