首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue.js入门（3）——详解组件通信

Posted in Javascript onDecember 02, 2016

本文介绍vue.js组件，具体如下：

5.2 组件通信

尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：

1.这让父组件与子组件紧密地耦合；

2.只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

每个Vue实例都是一个事件触发器：

  • $on()——监听事件。
  • $emit()——把事件沿着作用域链向上派送。（触发事件）
  • $dispatch()——派发事件，事件沿着父链冒泡。
  • $broadcast()——广播事件，事件向下传导给所有的后代。

5.2.1 监听与触发

v-on监听自定义事件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--子组件模板-->
    <template id="child-template">
      <input v-model="msg" />
      <button v-on:click="notify">Dispatch Event</button>
    </template>
    <!--父组件模板-->
    <div id="events-example">
      <p>Messages: {{ messages | json }}</p>
      <child v-on:child-msg="handleIt"></child>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
//    注册子组件
//    将当前消息派发出去
    Vue.component('child', {
      template: '#child-template',
      data: function (){
        return { msg: 'hello' }
      },
      methods: {
        notify: function() {
          if(this.msg.trim()){
            this.$dispatch('child-msg',this.msg);
            this.msg = '';
          }
        }
      }
    })
//    初始化父组件
//    在收到消息时将事件推入一个数组中
    var parent = new Vue({
      el: '#events-example',
      data: {
        messages: []
      },
      methods:{
        'handleIt': function(){
          alert("a");
        }
      }
    })
  </script>
</html>

vue.js入门（3）——详解组件通信

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="counter-event-example">
     <p>{{ total }}</p>
     <button-counter v-on:increment="incrementTotal"></button-counter>
     <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
  </body>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    Vue.component('button-counter', {
     template: '<button v-on:click="increment">{{ counter }}</button>',
     data: function () {
      return {
       counter: 0
      }
     },
     methods: {
      increment: function () {
       this.counter += 1
       this.$emit('increment')
      }
     },
    })
    new Vue({
     el: '#counter-event-example',
     data: {
      total: 0
     },
     methods: {
      incrementTotal: function () {
       this.total += 1
      }
     }
    })
  </script>
</html>

vue.js入门（3）——详解组件通信vue.js入门（3）——详解组件通信

在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

5.2.2 派发事件——$dispatch()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <p>Messages: {{ messages | json }}</p>
      <child-component></child-component>
    </div>
    <template id="child-component">
      <input v-model="msg" />
      <button v-on:click="notify">Dispatch Event</button>
    </template>

  <script src="js/vue.js"></script>
  <script>
    // 注册子组件
    Vue.component('child-component', {
      template: '#child-component',
      data: function() {
        return {
          msg: ''
        }
      },
      methods: {
        notify: function() {
          if (this.msg.trim()) {
            this.$dispatch('child-msg', this.msg)
            this.msg = ''
          }
        }
      }
    })
  
    // 初始化父组件
    new Vue({
      el: '#app',
      data: {
        messages: []
      },
      events: {
        'child-msg': function(msg) {
          this.messages.push(msg)
        }
      }
    })
  </script>
  </body>
</html>

vue.js入门（3）——详解组件通信

vue.js入门（3）——详解组件通信

vue.js入门（3）——详解组件通信

  1. 子组件的button元素绑定了click事件，该事件指向notify方法
  2. 子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数
  3. 父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

 5.2.3 广播事件——$broadcast()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <input v-model="msg" />
      <button v-on:click="notify">Broadcast Event</button>
      <child-component></child-component>
    </div>
    
    <template id="child-component">
      <ul>
        <li v-for="item in messages">
          父组件录入了信息：{{ item }}
        </li>
      </ul>
    </template>

  <script src="js/vue.js"></script>
  <script>
    // 注册子组件
    Vue.component('child-component', {
      template: '#child-component',
      data: function() {
        return {
          messages: []
        }
      },
      events: {
        'parent-msg': function(msg) {
          this.messages.push(msg)
        }
      }
    })
    // 初始化父组件
    new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      methods: {
        notify: function() {
          if (this.msg.trim()) {
            this.$broadcast('parent-msg', this.msg)
          }
        }
      }
    })
  </script>
  </body>
</html>

和派发事件相反。前者在子组件绑定，调用$dispatch派发到父组件；后者在父组件中绑定，调用$broadcast广播到子组件。

 5.2.4 父子组件之间的访问

  • 父组件访问子组件：使用$children或$refs
  • 子组件访问父组件：使用$parent
  • 子组件访问根组件：使用$root

$children：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <parent-component></parent-component>
    </div>
    
    <template id="parent-component">
      <child-component1></child-component1>
      <child-component2></child-component2>
      <button v-on:click="showChildComponentData">显示子组件的数据</button>
    </template>
    
    <template id="child-component1">
      <h2>This is child component 1</h2>
    </template>
    
    <template id="child-component2">
      <h2>This is child component 2</h2>
    </template>
    <script src="js/vue.js"></script>
    <script>
      Vue.component('parent-component', {
        template: '#parent-component',
        components: {
          'child-component1': {
            template: '#child-component1',
            data: function() {
              return {
                msg: 'child component 111111'
              }
            }
          },
          'child-component2': {
            template: '#child-component2',
            data: function() {
              return {
                msg: 'child component 222222'
              }
            }
          }
        },
        methods: {
          showChildComponentData: function() {
            for (var i = 0; i < this.$children.length; i++) {
              alert(this.$children[i].msg)
            }
          }
        }
      })
    
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

vue.js入门（3）——详解组件通信

vue.js入门（3）——详解组件通信

vue.js入门（3）——详解组件通信

$ref可以给子组件指定索引ID：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <parent-component></parent-component>
    </div>
    
    <template id="parent-component">
      <!--<child-component1></child-component1>
      <child-component2></child-component2>-->
      <child-component1 v-ref:cc1></child-component1>
      <child-component2 v-ref:cc2></child-component2>
      <button v-on:click="showChildComponentData">显示子组件的数据</button>
    </template>
    
    <template id="child-component1">
      <h2>This is child component 1</h2>
    </template>
    
    <template id="child-component2">
      <h2>This is child component 2</h2>
    </template>
    <script src="js/vue.js"></script>
    <script>
      Vue.component('parent-component', {
        template: '#parent-component',
        components: {
          'child-component1': {
            template: '#child-component1',
            data: function() {
              return {
                msg: 'child component 111111'
              }
            }
          },
          'child-component2': {
            template: '#child-component2',
            data: function() {
              return {
                msg: 'child component 222222'
              }
            }
          }
        },
        methods: {
          showChildComponentData: function() {
//            for (var i = 0; i < this.$children.length; i++) {
//              alert(this.$children[i].msg)
//            }
            alert(this.$refs.cc1.msg);
            alert(this.$refs.cc2.msg);
          }
        }
      })
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

 

效果与$children相同。

$parent：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <parent-component></parent-component>
    </div>
    
    <template id="parent-component">
      <child-component></child-component>
    </template>
    
    <template id="child-component">
      <h2>This is a child component</h2>
      <button v-on:click="showParentComponentData">显示父组件的数据</button>
    </template>
    
    <script src="js/vue.js"></script>
    <script>
      Vue.component('parent-component', {
        template: '#parent-component',
        components: {
          'child-component': {
            template: '#child-component',
            methods: {
              showParentComponentData: function() {
                alert(this.$parent.msg)
              }
            }
          }
        },
        data: function() {
          return {
            msg: 'parent component message'
          }
        }
      })
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

vue.js入门（3）——详解组件通信

如开篇所提，不建议在子组件中修改父组件的状态。

 5.2.5 非父子组件通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在更多复杂的情况下，可以考虑使用专门的 状态管理模式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue.js入门（3）——详解组件通信

- Author -

Redchar

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 #Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 #Javascript
HBuilder(1) kubernetes(1) 条形码(1) GPU(1) SeaTable(1) OOP(1) celery(1) tree shaking(1) MutationObserver(1) Three.js(1)
You might like
转义字符（\）对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
详解Python Socket网络编程
2016/01/05 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python3人脸识别的两种方法
2019/04/25 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图)
2019/08/06 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
澳大利亚便宜的家庭购物网站：CrazySales
2018/02/06 全球购物
德国最大的婴儿用品网上商店：Kidsroom.de（支持中文）
2020/09/02 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
七一党建活动方案
2014/01/28 职场文书
学生手册家长评语
2014/02/10 职场文书
致800米运动员广播稿
2014/02/16 职场文书
白血病募捐倡议书
2014/05/14 职场文书
思想政治表现评语
2015/01/04 职场文书
会计专业自荐信范文
2015/03/05 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Java Spring读取和存储详细操作
2022/08/05 Java/Android