vue组件之间数据传递和通信方式总结

方式主要包括：

1. ==父组件=>子组件 | 单向数据流，props==
2. ==子组件=>父组件 | 观察者模式，即vue的自定义事件 on==
3. ==非父子组件通信 | 中介者模式，即 中央事件总线 bus==
4. ==父子组件通信 | 父链和子链==
5. vuex 等状态管理库（略）

1 父组件=>子组件，props的两个主要用法

• 子组件把 props 的值，作为初始值（data中）保存起来，从而和父级解绑
• 子组件需要二次处理 props 值，这时，应将其作为【计算属性】保存起来

将prop用于子组件的data

• 定义一个本地的 data 属性并将这个 prop 用作其初始值

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• 用 prop 的值来定义一个计算属性

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

prop 是单向数据流

• 所有的 prop 都使得其父子 prop 之间形成了一个==单向下行绑定==
  父级 prop 的更新会向下流动到子组件中，但是反过来则不行
• ==不要在子组件中改变 prop==

props传值：父组件=>子组件

//静态传值

//动态传值






//不带参数的 v-bind，post={id:1,title:"title"}

//等价于

prop检验

详细章节见

• vue prop传值default属性如何使用
• vue prop传值类型检验

2 子组件=>父组件

• 原理：【观察者模式】 + 【vue自定义事件】
• 子组件用 $emit 方法触发事件，第一个参数是自定义事件名，后续参数都是要传递的数据
• 父组件用 v-on 定义的方法监听子组件的事件
• 注意，add 和 reduce 是两个自定义事件，用来监听子组件的 $emit 事件

//vue模板

//vue script
var MyComponent = {
  template:
    "
\
    +1\
    -1\
    
",
  data() {
    return {
      sum: 0
    };
  },
  methods: {
    handleAdd() {
      this.sum++;
      this.$emit("add", this.sum);
    },
    handleReduce() {
      this.sum--;
      this.$emit("reduce", this.sum);
    }
  }
};
export default {
  components: {
    MyComponent
  },
  data() {
    return {
      total: 0
    };
  },
  methods: {
    handleTotal(total) {
      this.total = total;
    }
  }
};

3 非父子组件通信 bus

• 使用【中央事件总线 bus】
• bus 其实就是一个空的Vue实例，充当中介者的作用
• bus 通过 on 来监听获取，这两个方法的第一个参数必需是同一个消息名称
• bus 对象中，可以添加 data、methods、computed 等信息
• 协同开发中，向 bus 对象添加一些共享的信息，是非常有用的
• 比如，token、用户昵称、邮箱信息等，只需初始化时让 bus获取一次，所有组件就都可以使用了

 //vue模板