vue组件传值 父传子 子传父 非父子组件传值

用vue写了好几个项目，初接触，还仔细按照规范，慢慢就混淆了组件传值的含义

注意几点：

1. 页面传值和组件传值，不是一个概念
2. 一个.vue文件，有可能是一个vue页面，也有可能是一个vue组件、
3. 单向数据流：父组件给子组件传值，子组件可以随便用，但是子组件不能随意改变这个值。（设计原理是，组件被多次使用时，如果一个组件改变了值，会影响别的组件使用）。
   如果子组件必须要改变，就自己在data中定义一个属性，使用自己的属性，改变。

接下来，总结一下组件之间传值

1，父组件给子组件传值

父组件给子组件传值用v-bind： （v-bind 可以简写为：）（下图示例）

子组件用props接收传值 （下图示例）

子组件接受参数，还可以做一些复杂的参数校验（比如，类型-type，是否必填-required，默认值-default，校验-validator）

2，子组件给父组件传值

子组件给父组件传值主要用this.$emit(“事件”，“参数”)

子组件写

父组件监听方法 以及  接受参数

3，非父子组件传值

一，用vuex （此处不做详细介绍）

二： BUS/ 总线 / 发布订阅模式/ 观察者模式

      1，建一个公用的js  

Vue.prototype.bus = new Vue();

    2.在传值组件中写

this.bus.$emit('change',this.content)

3.在接收组件中写

//在mounted中监听事件
var _this = this;
this.bus.$on('change',funciton(msg){
    _this.content= msg;  //注意这里的this指向问题
})

完整代码

今天的文章vue组件传值 父传子 子传父 非父子组件传值分享到此就结束了，感谢您的阅读。