详解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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
原生javascript实现分页效果
Apr 21 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
vue下的@change事件的实现
Oct 25 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
用PHP实现WEB动态网页静态
2006/10/09 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
JS实现标签页效果(配合css)
2013/04/03 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
AngularJS基础知识
2014/12/21 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
理解javascript封装
2016/02/23 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
JS出现404错误原理及解决方案
2020/07/01 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python中有趣在__call__函数
2015/06/21 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python分析作业提交情况
2017/11/22 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
公司年夜饭通知
2015/04/25 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android