Vue组件之间的通信

佚名 7年前 (2019-05-16) 随笔 1942人围观抢沙发百度已收录

项目中写组件一般是在component文件夹下，注册过的组件想要全局使用则需要在main.js中引入，局部使用的话就在需要的地方引入。我是全局引入：

（一）父组件向子组件传值（子组件通过props接收父组件的值）

父组件代码：app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <son :message="msg"></son>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
        msg: "我是父组件的数据"
      }
  }
}
</script>

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

子组件代码：SonComponent.vue

<template>
  <section>
    <h1>{{title}}</h1>
    <div>{{message}}</div>
  </section>
</template>
<script>
export default {
  name: 'SonComponent',
  data () {
    return {
      title: '子组件页面'
    }
  },
  props:['message']
}
</script>

效果如下：

（二）子组件→父组件通信（子组件通过$emit( eventName)来触发一个事件）

父组件代码：app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <son-btn @connect="say"></son-btn>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
        msg: "我是父组件的数据"
      }
  },
  methods:{
    say(arg){
      console.log(`大家好，我监听到了事件connect的触发，并且接收到了参数${arg[0]}`);
    }
  }
}
</script>

子组件代码：SonComponent.vue

<template>
  <section>
    <h1>{{title}}</h1>
    <button @click="send">按钮</button>
  </section>
</template>
<script>
  export default {
    name: 'Son1Component',
    data () {
      return {
        title: '子按钮'
      }
    },
    methods:{
        send(){
          this.$emit('connect',[1,2,3]);
        }
    }
  }
</script>

效果如下：