VUE 组件间通信

1. 父传子

// 父组件
<note-address :data="msg"></note-address> 

//子组件

<div>{{ data.partment }}</div>

export default {
  //props:['data']
  props: {
    data: object
  }
}

1. 子传父

//父组件
<note-address @new="addnote"></note-address> 

//子组件
<button type="small" class="confirm" @click="add">设为教案</button>

methods: {
 add () {
  this.$emit('new', false)
 }
}

1. 兄弟相传

1.创建 公共bus.js

//bus.js
import vue from 'vue'
export default new vue()

2.父组件注册两个子组件
components:{
    firstchild,
    secondchild
}

3.firstchild组件

<input type="button" value="点击触发" @click="elementbyvalue">

<script>
// 引入公共的bug，来做为中间传达的工具
  import bus from './bus.js'
  export default {
      methods: {
      elementbyvalue: function () {
        bus.$emit('val', '兄弟，收到了吗？')
      }
    }
  }
</script>

4.secondchild组件

<span>{{msg}}</span>

<script>
// 引入公共的bug，来做为中间传达的工具
  import bus from './bus.js'
  export default {
      mounted(){
            let self = this;
            bus.$on('val', function (msg) {
                console.log(msg)
                self.msg = msg
            })
      }
    }
  }
</script>