VUE组件传值常用方法

首先引入三个组件 HelloWorld,Father,Son，

三个组件的关系为 HelloWorld>Father>son

下面组件通信的介绍中全部采用这三个组件来实现

HelloWorld

1.props 和 $emit 父子组件之间的通信

props 进行从父组件到子组件间的传值

在father 组件中为 son 组件绑定数据,此时可以将 fahter 组件中 fatherMes 的值传入 Son 组件中

在Son 组件中接收 father 组件传入的值

props: ["fatherMes"]

在 Son组件中使用传入的值

使用起来和Son 自身的变量无区别

{{fatherMes}}

注意：子组件只能用父组件的值但是不能修改

$emit 自定义事件通过子组件改变父组件的值以及子组件向父组件传值

A. 改变父组件值

在子组件中定义方法函数,方法函数里自定义事件名

methods: {

fn() {

  this.$emit("change-mes");

} }

子组件中通过触发 fn() 方法来触发事件

点击我

1

父组件内绑定事件

 

1

触发事件执行相应方法函数 changeMes

    changeMes() {

    this.fatherMes = "我是改变后的父亲";

  }

B. 向父组件传值

原理和改变父组件的值相同，唯一区别是在注册事件时传递参数

注册事件时将子组件的值，传入事件的参数

    fn() {

    this.$emit("change-mes", this.sonMes);

  }

接收事件

1

在事件触发的函数内接收事件传递的参数

    changeMes: function(sonMes) {

    this.fatherMes = sonMes;

  }

1

2

3

这样就把子组件的属性赋值给了父组件的属性

2.通过 $parent 和 $chidren 来实现父子组件的传值

A. $parent

在子组件中定义方法改变父组件属性

    fn() {

      this.$parent.fatherMes = "改变后的父亲";

    }

1

2

3

触发方法就可以改变父组件的值

  点击我

1

B. $children

在父组件内定义方法 fn

  fn() {

    alert(this.$children[0].sonMes);

    this.$children[0].sonMes = "111";

    alert(this.$children[0].sonMes);

  }

触发该方法

点击我

1

注意：通过 $children 获取的子组件为数组，并且顺序是混乱的

3. provide和inject 实现祖先和后代之间通信

祖先组件通过 provide 提供值，后代通过 inject 获取这个值

在HelloWorld 组件中

  provide() {

    return {

      mes: this.mes

    };

  }

1

在son 组件中

inject: ["mes"]

1

== 注意如果在 son 组件中定义方法 fn 改变根组件的值==

    fn() {

  alert(this.mes);

  this.mes = "改变后的根组件";

  alert(this.mes);

}

1

2

3

4

5

此时只会改变子组件的引用 mes 而不会改变父组件的 mes

5. $root 直接访问根实例，即main.js

此方法原理同 vuex 类似，将数据储存在根组件里，这样所有组件都可以访问到

this.$root

1

6. VUEX

创建一个全局对象，将数据放在全局对象里，这样所有组件都可以访问这个对象

官方 vuex 文档

https://vuex.vuejs.org/zh/