vue组件通信的几种方式

 

组件间通信场景大致分为以下几种

1. 父组件向直接子组件传值。
2. 子组件向直接父组件传值。
3. 组件上下超过1级传值。

我们先来说第一种

1 父组件向直接子组件传值。

• 方法1：通过props属性进行传值，props 可以是数组或对象，用于接收来自父组件的数据，官网使用说明。总结：子组件声明props,定义接受对象（可以指定接受对象的类型以及默认值），父组件通过v-bind:的方式进行传值。例子：

<!-- parent -->

<template>
  <div>
    <children v-bind:parentMessage="messge"></children>
    <!-- v-bind: 可以简写成：即 <children :parentMessage="messge"></children> -->
  </div>
</template>
<script>
import children from "./children";
export default {
  data() {
    return {
      messge: "i am from parent"
    };
  },
  components: {
    children
  }
};
</script>

<!-- children -->
<template>
    <div>
        <span>{{parentMessage}}</span>
    </div>
</template>
<script>
export default {
    props:{
        //指定类型
        parentMessage:{
            type:String,//可以指定多种类型用|链接，例如 type:String|Boolean|Number
            default:""
        }
    }
}
</script>

• 方法2：在父组件内访问子组件实例调用子组件内定义的方法顺带传参，官网访问子组件方法说明。例子：

<!-- 父组件parent -->

<template>
  <div>
    <children ref='children'></children>
  </div>
</template>
<script>
import children from "./children";
export default {
  mounted(){
      //demo在此进行赋值调用
      this.$refs["children"].updateMessage('I am from parent');
  },
  components: {
    children
  }
};
</script>

<!-- 子组件 children -->
<template>
    <div>
        <span>{{message}}</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            message:"none"
        }
    },
    methods:{
        updateMessage(msg){
            this.message = msg;
        }
    }
}
</script>

2 子组件向直接父组件传值。

•     通过子组件调用回调方法传参，语法：this.$emit('方法名字',参数值)。父组件监听子组件定义的“方法”，@"方法名字"=“本地方法名”。例子：

<!-- 父组件 parent -->

<template>
  <div>
    <children @handlerMessageChange="handlerMessageChange"></children>
  </div>
</template>
<script>
import children from "./children";
export default {
  methods:{
      handlerMessageChange(msg){
          console.log("子组件传递过来的参数:",msg);
      }
  },
  components: {
    children
  }
};
</script>

<!-- 子组件 children -->
<template>
    <div>
        <span @click="handlerClick">点我向父组件传参</span>
    </div>
</template>
<script>
export default {
    methods:{
        handlerClick(){
            this.$emit("handlerMessageChange",'i am from children');
        }
    }
}
</script>

•   利用$parent方式，官网说明。

3 组件上下超过1级传值。

•  利用$parent、ref等方法。缺点容易乱，多层级不方便查找。
• 利用vuex。优点：官方推荐方法。缺点：新的知识点需要系统了解学习。vuex官网
• 利用provide/inject。优点：provide/inject是解决组件之间的通信问题的利器，不受层级结构的限制。（此方法提供的属性不是动态绑定的，非双向绑定）官网介绍。例子：

<!-- 父组件 parent -->

<template>
  <div>
    <children ></children>
  </div>
</template>
<script>
import children from "./children4";
export default {
  provide:function () {
    return{
        parentData:"i am parentData",//向子组件提供数据
    }
  },
  components: {
    children
  }
};
</script>

<!-- 子组件 children -->
<template>
    <div>
        <span @click="handlerClick">点我向父获取父组件的参数</span>
    </div>
</template>
<script>
export default {
    inject:['parentData'],
    methods:{
        handlerClick(){
            console.log(this.parentData);
        }
    }
}
</script>