vue学习笔记--vue组件之间的值传递

一：父子关系组件之间的值传递：

1：父组件主动调用子组件数据/方法

    首先在父组件中使用子组件的元素中添加ref属性，值可以自定义（eg：child）；

    然后在父组件中要用到子组件中的数据或者方法的地方使用如下方法调用子组件的数据/方法：

this.$refs.child.子组件中的属性名         //调用/使用子组件中的数据
this.$refs.child.子组件中的方法名         //调用/使用子组件中的方法

    到此在父组件中就可以调用子组件中的属性/方法

2：子组件主动调用父组件数据方法

    直接在子组件中使用如下js代码使用父组件中的数据/方法

this.$parent.父组件中的属性              //调用/使用父组件中的属性
this.$parent.父组件中的方法              //调用/使用父组件中的方法

二：非父子组件之间的值传递

1：可以根据组件之间的父子关系实现非父子组件之间的值传递

2：事件广播的方式实现非父子组件之间的值传递

    （1）新建两个组件Home.vue和News.vue组件，分别在两个组件中创建data属性和方法

    （2）在主组件中引入使用上面两个组件

    （3）创建一个js文件(VueEvent.js)先引入vue模块，再创建一个vue实例（eg:VueEvent），最后把这个实例暴露出去

    （4）在Home/News组件中先引入（3）中创建的vue实例，然后使用如下方法广播数据

VueEvent.$emit('to-news',this.msg)       //'to-news' 这是一个名称，可以自定义
                                         //this.msg  是把当前组件中的msg属性广播给其他组件

    （5）在另外一个组件中使用广播的数据，首先在另一个组件中也要引入（3）中创建的vue实例，然后在生命周期函数                            mounted函数中使用如下方法监听广播，并使用广播的数据

mounted(){
    this.$on("to-news",function(data){
      console.log(data) //这里的data就是广播名为‘to-news’广播的数据
    })
  }