VUE组件之间的通信案例

vue之间的通信

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

一、组件之间的通信

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

传值：string ，number , boolean;

传引用：array , object

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

二、父组件向子组件传值

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

    
    

<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>

          
      {{title}}