VUE组件之间的通信

前言：第一次分享学习过程中的一些感悟与体会，不喜勿喷；VUE是一个渐进式的框架，便于前端项目的开发，第一次接触VUE的时候，发现这个东西很神奇。所有的页面均为组件化，对于页面上重复出现的部分我们可以抽取出来作为一个单独的组件，每次引用的时候均会有组件之间的通信。下面，我就把我在学习过程中的收获记录下来：

一、组件之间的通信

通信方式分为传值和传引用两种方式：

传值：String ，Number ,  Boolean;

传引用：Array ,  Object

注：传引用的时候，一个地方的数据变化，其余地方引用的数据也会跟着变化。

二、父组件向子组件传值

在父组件中，需要注册子组件并引用子组件，这里演示两种，传值和传引用。在子组件中需要通过props属性来接收父组件传递的值。具体代码示例如下：

<template>
<div>
    <!-- 这里是父组件 -->
    <Test :intems="intems" :title="title"></Test>
</div>
</template>
<script>
import Test from './Test'
export default{
    data(){
        return{
            title:'传递的是一个值，(number,string,boolean)',
            intems:
            [
              {name:'小白兔',sex:"女",age:"18",school:"-------大学"},
              {name:'小白兔',sex:"男",age:"23",school:"-------大学"},
              {name:'小白兔',sex:"女",age:"12",school:"-------大学"},
              {name:'小白兔',sex:"女",age:"26",school:"-------大学"},
              {name:'小白兔',sex:"男",age:"20",school:"-------大学"},
            ]
        }
    }，
    components:{
        Test
    }
}    
</script>

<!-- 这里是Test子组件 -->
<template>
    <div>
        <!-- 这里直接使用父组件传递过来的引用 -->
        <table>
            <tbody>
                <tr v-for="intem in intems" :key="intem.id">
                     <td>{{intem.name}}</td>
                     <td>{{intem.sex}}</td>
                     <td>{{intem.age}}</td>
                     <td>{{intem.school}}</td>
                </tr>
            </tbody>
      </table>
      <!-- 这里直接使用父组件传递过来的值 -->
      <h1>{{title}}</h1>
    </div>
<template>
<script>
export default{
    data(){
        return{
            //props:["intems"],//两种接收父组件值得方法，第二种比较严谨
              props:{
                intems:{
                  type:Array,
                  required:true
                },
                title:{
                  type:String
                }
              }
        }
    }
}
</script>
<style></style>

 

三、子组件向父组件传值

在子组件中向父组件传值，需要触发或是监听到值变化向父组件进行传递。具体代码如下：

<template>
    <div>
        <!-- 这里是子组件Test，演示向父组件传值 -->
        <button v-on:click="Msg">子组件传值到父组件</button>
    </div>
</template>
<script>
export default{
     methods:{
        //子组件向父组件事件传值
        Msg:function(){
          //第一个参数是自定义的事件名，第二是内容
          this.$emit("msgChanged","子向父组件传值");
        }
    }
}
</script>

<template>
    <div>
        <!-- 这里是父组件 -->
        <Test v-on:msgChanged="updataMsg($event)"></Test>
        <!-- 显示子组件传递的参数值 -->
        <h>{{msgZXC}}</h>
    </div>
</template>
<script>
import Test from './Test'
export default{
    data(){
        msgZXC : '等待接收子组件传递的参数值'
    },
    methods:{
        updataMsg(msgZXCChanged){
          this.msgZXC = msgZXCChanged;
        }
    },
    components:{
        Test
    }
}
</script>

三、兄弟组件之间的通信

兄弟组件为同一个父组件当中的两个子组件之间的通信。这里不再做代码展示，应用场景个人觉得相对没有前两种多，兄弟组件之间的通信可以使用watch（监听）来进行实现，通过中转变量。