首页
所有分类
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 相关文章推荐
jquery获取当前点击对象的value方法
Feb 28 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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
Carbon(1) 优先队列(1) 模板引擎(1) Android Studio(4) 三角函数(1) seata(1) 动态代理(1) nacos(1) 迪杰斯特拉(1) Dijkstra(1)
You might like
PHP开发过程中常用函数收藏
2009/12/14 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Kathmandu英国网站：新西兰户外运动品牌
2017/03/27 全球购物
英国顶级珠宝品牌之家：John Greed
2018/06/09 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
物流管理应届生求职信
2013/11/07 职场文书
销售员岗位职责
2014/06/09 职场文书
立志成才演讲稿
2014/09/04 职场文书
表彰大会新闻稿
2015/07/17 职场文书
​（迎国庆）作文之我爱我的祖国
2019/09/19 职场文书
python基础之模块的导入
2021/10/24 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python