详解vue2.0组件通信各种情况总结与实例分析


Posted in Javascript onMarch 22, 2017

Props在vue组件中各种角色总结

在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下:

使用props传递数据---组件内部

//html
<div id="app1">
  <i>注意命名规定:仅在html内使用my-message</i>
  <child my-message="组件内部数据传递"></child>
</div>
//js
<script>
  Vue.component('child', {
    props: ['myMessage'],
    template: '<mark>{{ myMessage }}<mark/>'
  });
  new Vue({
    el: '#app1'
  })
</script>

动态props通信---组件与根节点(父子之间)

<div id="app2">
  <input v-model="parentMsg">
  <br>
  <child :parent-msg="parentMsg"></child>
</div>
<script>
  Vue.component('child', {
    props: ['parentMsg'],
    template: '<mark>{{ parentMsg }}<mark/>'
  });
  new Vue({
    el: '#app2',
    data: {
      parentMsg: 'msg from parent!'
    }
  })
</script>

对比分析:

例子1:

<comp some-prop="1"></comp>
//组件内部数据传递,对应字面量语法:传递了一个字符串"1"

例子2:

<comp v-bind:some-prop="1"></comp>
//组件与根节点数据传递,对应动态语法:传递实际的数字:js表达式

单向数据流动特点:父组件属性变化时将传导给子组件,反之不可

两种改变prop情况

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

//定义一个局部data属性,并将 prop 的初始值作为局部数据的初始值
props: ['initialCounter'],
    data: function () {
    return { counter: this.initialCounter }
    }
//定义一个局部computed属性,此属性从 prop 的值计算得出
 props: ['size'],
    computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
    }
    }

子组件索引

尽管有 props 和 events ,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID

<div id="parent">
<!-- vm.$refs.p will be the DOM node -->
<b ref="p">hello</b>
<!-- vm.$refs.child will be the child comp instance -->
<user-profile v-for='i in 3' ref="profile"></user-profile>
</div>
<script>
var userPf=Vue.component('user-profile',{
  template:'<div>hello $refs</div>'
});
var parent = new Vue({ el: '#parent' });
// 访问子组件
var child = parent.$refs.profile;
console.log(child[0]);
console.log(parent.$refs.p);
</script>

$refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

数据反传---自定义事件

自定义事件的根基在于每个vue实例都实现了事件接口(Event interface)

Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

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

  1. 监听:$on(eventName)
  2. 触发:$emit(eventName)
<div id="app3">
<p>Look at the parent's data: <mark>{{t}}</mark> & the child's data: <mark>{{childWords}}</mark></p>
<child v-on:add="pChange"></child>
<child v-on:add="pChange"></child>
<child v-on:click.native="native"></child>
</div>
<script>
Vue.component('child', {
  template: `<button @click="add">{{ c }}</button>`,
  data: function () {
    return {
      c: 0,
      msg: 'I am from child\'s data'
    }
  },
  methods: {
    add: function () {
      this.c += 1;
      this.$emit('add',this.msg);
    }
  },
});
new Vue({
  el: '#app3',
  data: {
    t: 0,
    childWords: ''
  },
  methods: {
    pChange: function (msg) {
      this.t += 1;
      this.childWords=msg;
    },
    native:function () {
      alert('I am a native event ,which comes from the root element!');
    }
  }
})
</script>

兄弟间通信---简单场景用bus,复杂场景用vuex

<div id="app4">
  <display></display>
  <increment></increment>
</div>
<script>
  var bus = new Vue();
  Vue.component('increment', {
    template: `<button @click="add">+</button>`,
    data: function () {
      return {count: 0}
    },
    methods: {
      add: function () {
        bus.$emit('inc', this.count+=1)
      }
    }
  });
  Vue.component('display', {
    template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
    data: function () {
      return {c: 0}
    },
    created: function () {
      var self=this;
//      bus.$on('inc', function (num) {
//        self.c = num
//      });
      bus.$on('inc', (num) =>
        this.c = num
      );
    }
  });
  vm = new Vue({
    el: "#app4",
  })
</script>

总结:Vue中关于组件间及组件与根节点间通信都可以人为是父子兄弟间的通信,另外父子关系是相对的即与上下文有关(比如A组件的父组件可能是B组件的子组件);上述四个例子分别演示了不同组件通信的机制。

澄清了上述问题不难理这句话:

编译作用域---父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。分发内容是在父组件作用域内编译

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

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
JS+DIV实现的卷帘效果示例
Mar 22 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
基于Python正确读取资源文件
2020/09/14 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
英文自荐信格式
2013/11/28 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
公司慰问信范文
2015/03/23 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers