vue中的非父子间的通讯问题简单的实例代码

官网上的例子好晦涩，看了一个头两个大，关于非父子间的通讯问题，经过查阅得到了下面的例子，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>兄弟之间的通讯问题</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
<script>
  //创建中央事件总线。
    var bus =new Vue();
//  组件one
  Vue.component('one',{
    template:'<button v-on:click="oneFn">点击+</button>',
    data:function () {
      return{
        oneNum:0
      }
    },
//    为组件one创建方法，用来触发事件common（common是中央事件总线bus的自定义事件名称，只需要与two中的监听事件名称一致即可。
    methods:{
      oneFn:function () {
        bus.$emit("common", this.oneNum+=1)//此处的参数即为two中监听事件中传入的参数（n），此处（触发）的this指的是组件one，而在（监听）的this指的是bus。
      }
    }
  });
//  组件 two
  Vue.component('two',{
    template:'<p>{{twoNum}}</p>',
    data:function () {
     return {
       twoNum:0
     }
    },
//    为组件two创建钩子，挂载$on监听事件，
    created:function () {
      var self = this;//将this赋值给self。
      bus.$on('common',function (n) {
        self.twoNum = n;//此处为self，表示是组件two的变量，若为this，则表示是bus的变量。
      })
    }
  });
new Vue({
  el:'#app'
})
</script>
</body>
</html>

我也是新手，刚开始自学Vue，上面有不懂的童鞋请留言，一起进步！

以上所述是小编给大家介绍的vue中的非父子间的通讯问题简单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue 非父子组件通信方法（非Vuex）

    详解Vue 非父子组件通信方法（非Vuex）

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • Vue非父子组件通信详解

    Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • vue中手机号,邮箱正则验证以及60s发送验证码的实例

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue中对拿到的数据进行A-Z排序的实例

    最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下 我拿到的数据是这样的,我想让他按照A-Z顺序排列 1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列. computed:{ sortList(){ return this.singers.sort((a, b) => { return a['Findex'].localeCompare(b['Findex']) }) } }, 然后 使用v-for

  • 在vue中把含有html标签转为html渲染页面的实例

    在vue中把含有html标签转为html渲染页面的实例

    在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为:<p>我是p标签</p> 输出结果是:我是p标签 普通用户一样: 同上理 加v-html就行了 以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue中实现拖动调整左右两侧div的宽度的示例代码

    写在最前 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 这是我最终的实现效果 还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,<vue 拖动调整左右两侧div的宽度>.<vuejs中拖动改变元素宽度实现宽度自适应大小>,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节. 实现原理 如上图所示,我们需要将要实现此功能的页面划分为三个部分,左部.调整区.右部,分别对应css样式为le

  • Vue 中如何将函数作为 props 传递给组件的实现代码

    本文 GitHub https://github.com/qq44924588 ... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue 新手经常问的一个常见问题.可以将字符串.数组.数字和对象作为props传递.但是你能把一个函数当作一个props来传递吗? 虽然可以将函数作为props传递,但这种方式不好.相反,Vue 有一个专门为解决这问题而设计的功能,接下来,我们来看看. 向组件传入函数 获

  • 在vue中给后台接口传的值为数组的格式代码

    比如你要传的数组是在data中的return中的params中的Arrays.传值格式需要如下: {flag: 1, data: this.params.Arrays} 如果要求是json格式,记得后面要加 {headers:{'Content-Type': 'application/json'}} 补充知识:vue项目之前后台联调之以数组作为参数传给服务端 一.要求 由于项目特殊要求,上传到知识库的文件,再点击保存按钮,保存至项目数据库. 由于上传多个文件,保存操作后台要求前端用数组作为参数传

  • Java中使用fileupload组件实现文件上传功能的实例代码

    Java中使用fileupload组件实现文件上传功能的实例代码

    使用fileupload组件的原因: Request对象提供了一个getInputStream()方法,通过这个方法可以读取到客户端提交过来的数据,但是由于用户可能会同时上传多个文件,在servlet中编程解析这些上传数据是一件非常麻烦的工作.为方便开发人员处理文件上传数据,Apache开源组织提供了一个用来处理表单文件上传的一个开源组件(Commons-fileupload),该组件性能优异,并且使用及其简单,可以让开发人员轻松实现web文件上传功能. 使用Commons-fileupload

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

随机推荐