#yyds干货盘点#16.父子组件事件通信

湛蓝之海

一、父子组件间通信
组件之间必然需要相互通信：

父组件可能要给子组件下发数据
子组件则可能要将它内部发生的动态行为告知父组件
非父子组件之间也可能会有数据和行为的通信

<!-- 父组件向子组件传递数据-->
<my-component :items="users"></my-component>

Vue.component('my-component', {
  template: `
  <div><button @click="myclick">单击以触发父元素更新</button></div>
  `,
  methods: {
  myclick: function(){
  
  }
  }
});

父元素通过 props 向子组件传递数据
子组件通过事件给父组件触发更新行为

二、父子组件间事件通信
子组件向父组件发送消息，使用Vue自定义事件机制

子组件使用 $emit 向父组件触发事件
父组件使用 $on 或 v-on 监听子组件事件

Vue.component('my-component', {
  template: '#my-component',
  props: ['value'],
  methods: {
  emitEvent: function(){
    console.log('child component click event');
    this.$emit('childevent');
  }
  }
});

<div id="app">
  <my-component @childevent="handleEvent"></my-component>
</div>

子组件向父组件发送事件消息时，可以一并传递其它附加数据
父组件直接在事件监听函数中通过形参获取这些附加数据参数（也可以使用 arguments [ ] 数组接收）

emitEvent: function() {
  this.$emit('childevent', '附加数据')
}

handleEvent: function() {
 console.log(arguments[0]);
}

三、父子组件间通信（HTML代码）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>父子组件间通信</title>
</head>
<body>
  <div id="app">
    <!-- 使用组件 -->
    <my-component :message="message" @my-component-event="handleMyComponentEvent"></my-component>
    <h6>父元素内容</h6>
    <p>message=={{message}}</p>
  
  
  </div>
  <template id="my">
    <div>
      <p>message={{message}}</p>
      <p>
        <button @click="handleClick">点击以更新父元素</button>
      </p>
    </div>
  </template>
  <script src="vue.js"></script>
  <script>
    //创建组件
    const myComponent = {
      template: '#my',
      //props接收父元素数据
      props: ['message'],
      //方法
      methods: {
        handleClick:function(){
          //向父元素发射事件消息
          //参数1：表示自定义事件的名称
          //自定义事件的名称要使用短横线连接形式
          //参数2：表示传递给父元素附加数据
          this.$emit('my-component-event','update message from child');
        }
      }
    }
    //Vue实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        message : 'from parent'
      },
      //注册组件
      components: {
        myComponent
      },
      //父元素methods
      methods: {
        //接收到子组件的自定义事件并处理之
        handleMyComponentEvent: function(param){
          console.log('接收到了子组件触发的事件');
           //this.message = param;
           this.message=arguments[0];
        }
      }
    });
  </script>
</body>
</html>

注：一定要引入Vue.js点击链接下载开发版或生产版本在html中引入即可

[Unix] #yyds干货盘点#16.父子组件事件通信

相关帖子

excel遇到问题需要关闭解决方法

电力猫怎么配对 TP-Link电力猫和扩展器配对教程

SQLite 基本命令使用方式

电力猫配对 TP-Link电力猫和扩展器配对教程

js数组之间如何进行连接

uniapp & vue 父子、子父、兄弟组件之间的传值

uniapp 截屏扫码

vue图片剪裁上传组件

谷歌翻译修复神器

湛蓝之海 LV3