Vue组件通信

父组件向子组件传值

//子组件
<template>
  <div>
      <h2>child子组件部分</h2>
      <p>{{message}}</p>
  </div>
</template>
<script>
  export default{
    props:["message"]
  }
</script>

//父组件
<template>
  <div id="app">
    <child message="helllo"></child>
  </div>
</template>
<script>
  import child from './components/Child';
  export default{
    name: 'app',
    components:{
      child
  }
  }
</script>
只需要在子标签里声明一个属性用来传值，子组件的props就能拿到。

//当然，子标签的属性可以动态绑定数据
<template>
  <div id="app">
    <child :message="parentMsg"></child>
  </div>
</template>
<script>
  import child from './components/Child';
  export default{
    name: 'app',
    data(){
      parentMsg:"hello,child"
    }
    components:{
      child
  }
  }
</script>

总结：

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

子组件向父组件传值

在子组件中创建一个按钮，给按钮绑定一个点击事件,在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

//子组件
<template>
  <div>
      <h2>child子组件部分</h2>
      <p>{{message}}</p>
      <button v-on:click="sendMsgToParent">//点击触发sendMsgToParent方法
  </div>
</template>
<script>
  export default{
    props:["message"],
    methods: {
      sendMsgToParent:function(){
          this.$emit("listenToChildEvent","this");//触发自定义事件listenToChildEvent，并传值
      }
    }
  }
</script>

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法:

<template>
  <div id="app">
    <child :message="parentMsg" v-on:listenToChildEvent="showMsgFromchild"></child> //监听这个自定义事件，并绑定一个方法
  </div>
</template>
<script>
  import child from './components/Child';
  export default{
    name: 'app',
    data(){
      parentMsg:"hello,child"
    },
    components:{
      child
  },
    methods:{
    showMsgFromchild:function(data){//绑定的方法获取到了值
        console.log(data);
    }
  }
  }
</script>

总结：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

兄弟组件之间通信

vue兄弟组件传值点这查看详情

• 新建一个js文件，然后引入vue实例化vue最后暴露这个实例
• 在要广播的地方引入刚才定义实例
• 通过vueEmit.$emit('名称'，‘数据’)。VueEmit为vue是实例。
• 另外一个组件接收数据：VueEmite.$on('名称'，function(){ })