vue之组件通信

vue组件通信一般分为以下几种情况：

1、父子组件通信；

2、兄弟组件通信；

3、跨多层级组件通信；

一、父子通信

       父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件。

　　父组件和子组件通信

父组件如下：

<template>
    <div class="parent">
        <div id="app">
            <!-- 利用v-bind绑定message，即子组件中props需要写入的参数 -->
            <!-- parentMsg即数据中的键名 -->
               <child v-bind:message="parentMsg"></child>
           </div>
    </div>
</template>

<script>
    import child from './components/Child'
    export default {
        name: "parent",
        components: {
            child
          },
          data(){
              return{
                  parentMsg:"hello,child"
              }
          }
    }
</script>

子组件如下：

<template>
    <div class="child">
        <h2>child子组件部分</h2>
           <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        name: "child",
        props : ['message'],//子组件通过props接收参数，message即父组件中绑定的属性message

} </script>

子组件接收的方法有三种方式：

第一种，直接接收：

props: ['childCom']

第二种，已对象的形式设置接收类型：

props: {
    childCom: String //这里指定了字符串类型，如果类型不一致则会警告
}

第三种，已对象的形式设置接收类型和默认值：

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

子组件和父组件通信

子组件代码：

父组件代码：

兄弟组件通信

兄弟组件也是使用$emit('事件名称，'需要传递的数据')，作为发送数据的一方和$on(事件名称"，'回调函数') 作为接收数据的一方。

首先在scr文件夹下，新建一个文件event.js,然后在里面新建一个vue实例。这个实例的作用就是作为兄弟组件间的桥梁，也就是中央事件中线。

然后建两个兄弟组件，组件代码分别如下：

兄弟组件一：

兄弟组件二：

接着将这两个组件引入到需要调用的组件里面，这里用app.vue为例。

app.vue文件代码如下：

跨多层次组件通信

这个是在Vue 2.2版本新增的API  provide / inject    虽然文档中不推荐直接在业务中使用，但是如果用得好的话，还是很有用的。

假设有父组件 A，然后有一个跨多层级的子组件 B

 

转载于:https://www.cnblogs.com/linjiangjin/p/10414074.html