澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

0s中eventBus实现兄弟组件通信，Javascript公共脚本库

最近做的一个项目是基于 vue AntDesign 的。由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下：

一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章讲解弹出浮动层的javascript函数, 以及函数的原理和使用注意事项. 二.实现效果 用脚本弹出浮动层是我们最常用的脚本方法之一.下面是效果图:

一、自定义组件

1、创建组件vue

澳门新浦京娱乐场网站 1

image.png

<!--公用button-->
<template>
  <div class="btn">
    <button type="button">{{btnText}}</button>
  </div>
</template>
<script>
export default {
</script>
<style lang="less" scoped>
</style>

2、父级引入组件并定义运用

html:
  <btn :btn-text="btnText" @touchstart.native="toPay()"></btn>
js:
import btn from '../common/btn.vue';
export default {
  components: {
    btn
  },
}

3、一个组件的v-for
在自定义组件里，你可以像任何普通元素一样用 v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

4、组件的prop
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息

澳门新浦京娱乐场网站，5、HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '{{ myMessage }}'  //没有写在html的为字符串模板
})

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child> //写在html的为非字符串模板需要：相对应的 kebab-case (短横线分隔式命名)

如果你使用字符串模板，则没有这些限制。

在vue1.0中，组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中，已经废除了这种用法。

首先新建一个Table组件的实例：

点击图中的"航空公司"后,会在"航空公司"下面弹出浮动层. 在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用.但是其中有的脚本过于简单,仅仅粗略的实现弹出效果而忽略了灵活性,通用性和跨浏览器特性. 使用JS框架又有些杀鸡用牛刀.所以在收集整理了一些资料后, 写出了下文中的ScriptHelper类的弹出层方法. 主要特点有: 支持多浏览器 使用面向对象方法封装 使用简单,通用性强. 将计算位置等函数进行提取, 所有的相关函数都可以单独调用, 可根据具体项目继续二次开发. 三.脚本方法 下面我先将脚本方法贡献出来,然后举例如何使用. 最后讲解脚本的原理. 复制代码 代码如下: /* ==================== ScriptHelper 开始 ==================== */ /* scriptHelper 脚本帮助对象. 创建人: ziqiu.zhang 2008.3.5 添加函数: getScroll():得到鼠标滚过的距离-兼容XHTML getClient():得到浏览器当前显示区域的大小-兼容XHTML showDivCommon():显示图层. 使用举例:

二、组件父传子数据

1、父级绑定要传输的数据

  <btn :btn-text="btnText" @touchstart.native="toPay()"></btn>

2、子组件接收并引用(props验证type写法)

澳门新浦京娱乐场网站 2

image.png

3、如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false
}

<todo-item v-bind="todo"></todo-item>

将等价于：

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

4、 单向数据流

vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。

... const columns = [ { title: "序号", dataIndex: "INDEX" }, { title: "主题大类", dataIndex: "THEME" }, { title: "中文名称", dataIndex: "CN_NAME" }, { title: "英文名称", dataIndex: "EN_NAME" }];... data() { return { columns, tableData: [ { INDEX: 0, THEME: "基础数据", CN_NAME: "地区", EN_NAME: "Area" }, { INDEX: 1, THEME: "个人信息", CN_NAME: "姓名", EN_NAME: "Name" } ] }; }

我是测试图层我是测试图层

三、组件子传父数据（ 自定义事件）

1、

// 子组件通过$emit发射数据
 methods: {
    popHide() {
      this.$emit('popHide', false);
    },
  },

// 父级通过v-on:popHide接收数据
 <gained v-show="isPopShow" :currentData = "currentData" v-on:popHide="popHide" v-if="gained"></gained>

2、使用自定义事件的表单输入组件

3、非父子组件的通信

var bus = new Vue()

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

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

然而在一些小型的项目，或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说，就需要一个比较便捷的解决方法。那么，eventBus的作用就体现出来了。

新建一个Menu菜单组件的实例及其样式：

事件源

四、父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符，故写法就像下面这样。（ 给组件绑定原生事件）

<btn :btn-text="btnText" v-on:click.native="setPhone"></btn>

如果将click的native去掉，思路如下：
子组件监听父组件给的click事件，
子组件内部处理click事件然后向外发送click事件：$emit("click".fn)
0s中eventBus实现兄弟组件通信，Javascript公共脚本库系列。改造后的代码如下(亲测可用)：

<template>
  <button class="disable-hover button ion-button" @click="_click"
          :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">

      <slot></slot>

    <div class="button-effect"></div>
  </button>
</template>

<script type="text/babel">
export default{
    ....
    ....
    methods: {
      _click: function () {
        this.$emit('click', function () {
          alert('inner')
        })
      }
    }
}
</script>

父组件中这样使用：

<ion-button @click="primary()" color="primary">primary</ion-button>

主要是现实途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

 {{menuData.THEME}} {{menuData.CN_NAME}} {{menuData.EN_NAME}} ... data() { return { ... menuData: {}, menuVisible: false, menuStyle: { position: "absolute", top: "0", left: "0", border: "1px solid #eee" } }; }

*/ function scriptHelper() { } // 得到鼠标滚过的距离 scrollTop 与 scrollLeft /* 用法与测试: var myScroll = getScroll(); alert("myScroll.scrollTop:" myScroll.scrollTop); alert("myScroll.scrollLeft:" myScroll.scrollLeft); */ scriptHelper.prototype.getScroll = function () { var scrollTop = 0, scrollLeft = 0; scrollTop = (document.body.scrollTop > document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop; if || scrollTop <0 ){ scrollTop = 0 ;} scrollLeft = (document.body.scrollLeft > document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft; if || scrollLeft <0 ){ scrollLeft = 0 ;} return { scrollTop:scrollTop, scrollLeft: scrollLeft}; } // 得到浏览器当前显示区域的大小 clientHeight 与 clientWidth /* 用法与测试: var myScroll = getScroll(); alert("myScroll.sTop:" myScroll.sTop); alert("myScroll.sLeft:" myScroll.sLeft); */ scriptHelper.prototype.getClient = function () { //判断页面是否符合XHTML标准 var isXhtml = true; if( document.documentElement == null || document.documentElement.clientHeight <= 0) { if( document.body.clientHeight>0 ) { isXhtml = false; } } this.clientHeight = isXhtml?document.documentElement.clientHeight:document.body.clientHeight; this.clientWidth = isXhtml?document.documentElement.clientWidth:document.body.clientWidth; return {clientHeight:this.clientHeight,clientWidth:this.clientWidth}; } // 显示图层,再次调用则隐藏 /* 参数说明: sObj : 要弹出图层的事件源 divId : 要显示的图层ID sObjHeight : 事件源的高度,默认为20.需要手工传入是因为对于由于事件源对象可能是各种HTML元素,有些元素高度的计算无法跨浏览器通用. moveLeft : 手工向左移动的距离.不移动则为0. divObjHeight: 弹出层的高度.如果传入大于0的此参数, 则当事件源下方空间不足时,在事件源上方弹出层.如果不传此参数则一直在事件源下方弹出. 用法与测试:

五，filters用法

  <p>本期学习计划开启日期为{{time | dateTransform}}</p>
  filters: {
    dateTransform(time) {
      let reg =/(d{4})-(d{2})-(d{2})/;
      return time.replace(reg, "$1年$2月$3日");
    }
  },

这里来看一个简单的例子：

注意这里给Menu加样式主要是为了实现点右键时Menu菜单出现在鼠标位置，所以我用了position: "absolute"来定义。

事件源

六，获取dom方法

//html
<div ref='outBox' class="out-box">
//js中获取
     let box = this.$refs.box;
      let outBox = this.$refs.outBox;

比如，我们这里有三个组件，main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件，而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现，click组件中触发点击事件后，由show组件将点击的是哪个dom元素console出来。

下面就是最重要的，通过Table组件的customRow参数来设置鼠标右键事件。首先添加Table组件的customRow参数：

*/ scriptHelper.prototype.showDivCommon = function (sObj,divId, sObjHeight, moveLeft, divObjHeight) { //取消冒泡事件 if!='undefined' && window != null && window.event != null ) { window.event.cancelBubble = true; } else if( ScriptHelper.showDivCommon.caller.arguments[0] != null ) { ScriptHelper.showDivCommon.caller.arguments[0].cancelBubble = true; } //参数检测.如果没有传入参数则设置默认值 if { moveLeft = 0; } if { sObjHeight = 20; } if { divObjHeight = 0; } var divObj = document.getElementById; //获得图层对象 var sObjOffsetTop = 0; //事件源的垂直距离 var sObjOffsetLeft = 0; //事件源的水平距离 var myClient = this.getClient(); var myScroll = this.getScroll(); var sWidth = sObj.width; //事件源对象的宽度 var sHeight = sObjHeight; //事件源对象的高度 var bottomSpace; //距离底部的距离 /* 获取事件源控件的高度和宽度.*/ if { sWidth = 100;//无法获取则为100 } else { sWidth = sWidth 1; //留出1px的距离 } if( divObj.style.display.toLowerCase { //隐藏图层 divObj.style.display = "none"; } else { if { alert; return false; } /* 获取事件源对象的偏移量 */ var tempObj = sObj; //用于计算事件源坐标的临时对象 while( tempObj && tempObj.tagName.toUpperCase { sObjOffsetTop = tempObj.offsetTop; sObjOffsetLeft = tempObj.offsetLeft; tempObj = tempObj.offsetParent; } tempObj = null; /* 获取距离底部的距离 */ bottomSpace = parseInt(myClient.clientHeight) - ( parseInt - parseInt - parseInt; /* 设置图层显示位置 */ //如果事件源下方空间不足且上方控件足够容纳弹出层,则在上方显示.否则在下方显示 if( divObjHeight>0 && bottomSpace < divObjHeight && sObjOffsetTop >divObjHeight ) { divObj.style.top = ( parseInt - parseInt.toString()

七、设置全局变量

main.js中写入

Vue.prototype.globalBadges = []; // 徽章全局变量用于储存临时徽章弹出

需要用到的地方：

 this.globalBadges

如果需要的数据量很大得用vuex来处理数据了；

首先，我们给click组件添加点击事件

然后在data里添加customClick的右键方法，以及在methods里添加body的click方法。添加body的click方法是为了在出现右键菜单后，点击左键时关闭菜单。

  • "px"; } else { divObj.style.top = ( parseInt parseInt.toString() "px"; } divObj.style.left = ( parseInt - parseInt.toString() "px"; divObj.style.display="block"; } } // 关闭图层 /*0s中eventBus实现兄弟组件通信，Javascript公共脚本库系列。 参数说明: divId : 要隐藏的图层ID 用法与测试: ScriptHelper.closeDivCommon; */ scriptHelper.prototype.closeDivCommon = function { // var divObj = document.getElementById; //获得图层对象 if { divObj.style.display = "none"; } } //建立scriptHelper类的一个实例对象.全局使用. var ScriptHelper = new scriptHelper(); /* ==================== ScriptHelper 结束 ==================== */ 四.使用举例 接下来我们创建HTML页面演示如何使用此脚本.此实例是一个菜单,当点击时显示子菜单图层. 1.引用脚本文件 将上面的代码保存在ScriptHelper.js文件中.在页面中添加引用:

八、keep-alive的运用；

  

data() { return { ... customClick: record => ({ on: { contextmenu: e => { e.preventDefault(); this.menuData = record; this.menuVisible = true; this.menuStyle.top = e.clientY   "px"; this.menuStyle.left = e.clientX   "px"; document.body.addEventListener("click", this.bodyClick); } } }) }; }, methods: { bodyClick() { this.menuVisible = false; document.body.removeEventListener("click", this.bodyClick); } }

2.编写子菜单 先编写两个子菜单图层. 复制代码 代码如下:

1.基本用法

vue2.0提供了一个keep-alive组件
用来缓存组件,避免多次加载相应的组件,减少性能消耗

<keep-alive>
   <component>
     <!-- 组件将被缓存 -->
   </component>
</keep-alive>

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下

<keep-alive><router-view></router-view></keep-alive>

将首次触发请求写在created钩子函数中,就能实现缓存,
比如列表页,去了详情页 回来,还是在原来的页面

想要在doClick()方法中，实现对show组件的通信，我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js

至此，Ant Design Vue中Table组件行内右键菜单就实现了。完整代码如下：

1-1

2.缓存部分页面或者组件

(1)使用router. meta属性

// 这是目前用的比较多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router设置

  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    // 表示index和test2都使用keep-alive

(2).使用新增属性inlcude/exclude
2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件

<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

//其中a,b是组件的name
注意:这种方法都是预先知道组件的名称的

(2)动态判断

<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

includedComponents动态设置即可

import Vue from 'vue';  

    {{menuData.THEME}} {{menuData.CN_NAME}} {{menuData.EN_NAME}}  const columns = [ { title: "&#24207;&#21495;", dataIndex: "INDEX" }, { title: "&#20027;&#39064;&#22823;&#31867;", dataIndex: "THEME" }, { title: "&#20013;&#25991;&#21517;&#31216;", dataIndex: "CN_NAME" }, { title: "&#33521;&#25991;&#21517;&#31216;", dataIndex: "EN_NAME" }];export default { data() { return { columns, tableData: [ { INDEX: 0, THEME: "&#22522;&#30784;&#25968;&#25454;", CN_NAME: "&#22320;&#21306;", EN_NAME: "Area" }, { INDEX: 1, THEME: "&#20010;&#20154;&#20449;&#24687;", CN_NAME: "&#22995;&#21517;", EN_NAME: "Name" } ], menuData: {}, menuVisible: false, menuStyle: { position: "absolute", top: "0", left: "0", border: "1px solid #eee" }, customClick: record =&gt; ({ on: { contextmenu: e =&gt; { e.preventDefault(); this.menuData = record; this.menuVisible = true; this.menuStyle.top = e.clientY   "px"; this.menuStyle.left = e.clientX   "px"; document.body.addEventListener("click", this.bodyClick); } } }) }; }, methods: { bodyClick() { this.menuVisible = false; document.body.removeEventListener("click", this.bodyClick); } }};

1-2

九、关于v-bind、v-on、v-model

export default new Vue();  

总结

2-1

v-bind

  • 缩写：:

  • 预期：any (with argument) | Object (without argument)

  • 参数：attrOrProp (optional)

  • 修饰符：

    • .prop - 被用于绑定 DOM 属性。
    • .camel - (2.1.0 ) 将 kebab-case 特性名转换为 camelCase.
    • .sync (2.3.0 ) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

  • 用法：
    动态地绑定一个或多个特性，或一个组件 prop 到表达式。
    在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
    在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
    没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。

以上所述是小编给大家介绍的Vue中Table组件行内右键菜单实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

2-2

v-on

  • 缩写：@

  • 预期：Function | Inline Statement | Object

  • 参数：event

  • 修饰符：

    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

  • 用法：
    绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
    从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
    用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
    在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。

import Bus from 'common/js/bus.js';  

对于子菜单, 最重要的就是要设置两个样式:position和display. position:absolute 让此图层能够精确定位显示.从而控制他的显示位置. display:none 让图层在加载时不显示. 3.编写主菜单 主菜单代码如下: 复制代码 代码如下:

v-model

也可以绑定数据，但是他是用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

接下来，我们在doClick方法中，来触发一个事件：

Menu1 Menu2 NoSubMenu

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

methods: {  

我们创建了三个菜单.其中Menu1和Menu2拥有子菜单, NoSubMenu没有子菜单. 我们使用了a元素创建菜单对象, 但是因为没有为其添加href属性,所以默认情况下鼠标放上去不会变成hand图形.需要为其添加样式cursorHand,次样式的代码如下:

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

   addCart(event) {  

最关键的是为菜单添加的onclick事件, 此事件调用ScriptHelper.showDivCommon方法用于显示图层. 方法第一个参数值为this表示将事件源对象传入, 在函数中会根据事件源计算显示位置. 方法第二个参数表示弹出图的Id 方法第三个参数是可选参数, 用于设置向下的偏移量.因为我们计算的位置是"Menu1"这个元素的左上角坐标.需要设置一个向下的偏移量.一般设置为事件源的高度,默认为20px. 方法第四个参数是可选参数,用于设置向左的偏移量.原因同上.默认为0px; 方法第五个参数是可选参数,需要传入弹出层的高度.如果使用了此属性则弹出层可能弹出在事件源上方.不传递此属性则始终在事件源下方弹出图层. 4.效果与完整代码

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

Bus.$emit('getTarget', event.target);   

完整实例代码如下: 复制代码 代码如下:

十、计算属性和监听器

<template>
    <div>
        <input type="text" name="" v-model="myVal"><br/>
        {{ myValueWithoutNum }}<br/>
        {{ getMyValueWithoutNum() }}<br/>
         <input type="text" name="" v-model="myVal1"><br/>
    </div>
</template>
<script>
 export default {
    data () {
      return {
        myVal: '',
        myVal1:''
      }
    },
    computed: { //计算属性
      myValueWithoutNum () {
        return this.myVal.replace(/d/g, '')
      }
    },
    methods: {// 方法
      getMyValueWithoutNum () {
        return this.myVal.replace(/d/g, '')
      }
    },
     watch: { //监听器
      myVal1 (val, oldval) {
        console.log(val, oldval)
      }
    }
  }
</script>

相关文档请看：https://cn.vuejs.org/v2/guide/computed.html

   }  

ScriptHelper 类测试页面

十一、数组更新检测——变异方法

}  

Menu1 Menu2 NoSubMenu

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

这里我们在click组件中每次点击，都会在bus中触发这个名为'getTarget'的事件，并将点击事件的event.target顺着事件传递出去。

1-1

替换数组

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

接着，我们要在show组件中的created()钩子中调用bus监听这个事件，并接收参数：

1-2

注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

举例：

<template>
    <div>
        <ul id="example-1">
          <li v-for="item in items">
            {{ item }}
          </li>
        </ul>
    </div>
</template>
<script>
 export default {
    data () {
      return {
        items: [
        '11111',
        '22222',
        '33333'
        ]
      }
    },
    mounted(){
      //this.items[0] = 'aaaaa'; 这种赋值方法视图不更新数据
      this.items.splice(0, 1, 'aaaaa') // 视图更新数据
    },
  }
</script>

created() {  

2-1

十二、 使用插槽分发内容

Bus.$on('getTarget', target => {  

2-2

十三、this.$nextTick

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：

Vue.component('example', {
  template: '{{ message }}',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

            console.log(target);  

五.注意事项: 1.要给Body元素加上position:relative样式: 不增加的话在IE6下有时会出现无法精确定位事件源的情况.比如在menu的

十四、生命周期函数的运用

澳门新浦京娱乐场网站 3

3346068135-580822cd52898_articlex.png

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

        });  

上添加几个
,则弹出层的位置就发生错误了. 如果在Body元素上增加此样式仍然弹出位置错误,则请在事件源对象的容器元素中也添加此样式 2.不传递最后一个参数则弹出层只在事件源下面弹出.否则将会计算事件源底部的举例, 如果底部控件不足并且上部控件充足,则弹出层显示在事件源上方. 3.在页面上要添加DOCTYPE元素.不添加的话很可能在某些浏览器中出现错误.有关DOCTYPE的作用,请查看下面的文章: DOCTYPE元素解析 六.总结 兼容多浏览器真的是一件让人头疼的事情.我估计此函数还是会有问题.本来想写脚本分析的, 但是在写作的时候又发现了一些Bug并且进行了修正.兼容来兼容去最后把自己兼容晕了.其实如果一个项目能使用脚本库将会是一个很好的选择.本系列文章只是希望构建一个轻量级的脚本类库.大家使用中有任何问题希望多多交流, 一起打造简单易用的脚本库!

十五、 非父子组件的通信

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

var bus = new Vue()

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

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

在复杂的情况下，我们应该考虑使用专门的状态管理模式。
一篇有关Vue2.0子同级组件之间数据交互文章：http://blog.csdn.net/wang_meiwei/article/details/75948844

      }  

这样，在每次click组件的点击事件中，就会把event.target传递到show中，并console出来。

所以eventBus的使用还是非常便捷的，但是如果是中大型项目，通信比较复杂，还是建议大家直接使用vuex。

当然也可以直接将Bus注入到Vue根对象中，

import Vue from 'vue'

const Bus =new Vue()

var app=new Vue({

    el:'#app'

    data:{

　　　　Bus

    }

})

在子组件中通过this.$root.Bus.on(),this.$root.Bus.emit()来调用

本文由澳门新浦京娱乐场网站发布于服务器,转载请注明出处：0s中eventBus实现兄弟组件通信，Javascript公共脚本库

相关阅读