vue中各组件之间传递数据的方法示例


Posted in Javascript onJuly 27, 2017

前言

本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

作用域

在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。

下面几种方法可以实现组件之间数据的传递。

一、通过prop传递数据

1)在子组件中,使用prop属性,显示的表明,它所需要的数据。

2)在父组件中,需要引用子组件的地方,传入数据。

具体看下面的代码:

<div id="app">
<my-item :value="value">//传入数据,注意引号里面的为父组件的数据,
</my-item>
</div>  
Vue.component("my-item",{
 template:"<div>这是组件,{{value}}</div>",
 props:["value"],//声明需要的数据,HTML 特性是不区分大小写的,所以此处如果为驼峰命名法,如:myMessage,则在模板中需要转化为用断线隔开的形式:my-Message
 data:function(){
  return {

  }
 },
 methods:{
  
 }
});

//创建vue实例
const vm=new Vue({
 el:"#app",
 data:{
  value:"这是父组件的数据",
 },
 methods:{
 
 },
});

这种方法适合父组件向子组件传递数据,可以记为:你先告诉我要什么,然后我给你什么。

注意:这种方式是单向数据流,当父组件的属性变化时,将传导给子组件,但是不会反过来。当你想改变prop中数据时,可采用如下方法:定义一个局部变量,并用 prop 的值初始化它,或者使用计算属性。

二、通过自定义事件

自定义事件可以实现子组件向父组件传递数据,具体方法如下:

1)在子组件中使用$emit(eventName,[...args])触发事件,传递数据

2)在父组件中$on(eventName,callback)监听事件,接受数据作为回调函数的参数,并执行回调函数。

其实这种方法和angular中控制器之间传递数据的有点类似的。注意触发和监听事件的事件类型必须要保持一致,才可接受导数据。具体看下面的例子:

<div id="app">
{{number}}
<!-- 在用到子组件的地方监听,监听当前实例上的自定义事件 ,接受参数,并执行回调-->
<my-item v-on:cli="totlcli">
</my-item>
</div>

Vue.component("my-item",{
template:"<button v-on:click='add'>{{count}}</button>",
data:function(){
 return {
  count : 0,
 }
},
methods:{
 add:function(){
  this.count+=1;
  this.$emit("cli",this.count);//触发当前实例上的事件。多个参数可以数组的形式传递
 }
}
});

//创建vue实例
const vm=new Vue({
el:"#app",
data:{
 number:""
},
methods:{
 totlcli:function(num){//这个回调在父组件监听到事件时,执行的,其参数为触发事件时传递的。
  return this.number=num;
 },
},
});

这样就可以把子组件中的数据通过自定义事件的方式传到了父组件。

三、使用slot分发内容

主要应用场景是,混合父组件的内容与子组件自己的模板时用到。具体使用步骤:

1)在子组件中,使用slot标签作为组件模板之中的内容分发插槽。 <slot> 元素自身将被替换。

2)在父组件中,使用slot属性,用于标记往哪个slot中插入子组件内容。

当name相同时,响应的内容就会被插入到子组件中去
具体看下面的例子:

<div id="app">
 <my-item>
  <p slot="header">这是头部</p>
  <p>这是多余的内容,</p>
  <p slot="footer">这是尾部</p>
 </my-item>
</div>

Vue.component("my-item",{
  template:"<div>"+
    "<header><slot name='header'></slot></header>"+
    "<main><slot>备用插槽,当没有备用内容会显示出来</slot></main>"+
    "<footer><slot name='footer'></slot></footer>"+
    "<div>",
  props:{
  },
  data:function(){
   return {   
   }
  }
 });
 const vm=new Vue({
  el:"#app",
  data:{
  },
  methods:{ 
  },
 });

渲染结构如下:

vue中各组件之间传递数据的方法示例

注意:匿名(没用name属性)的slot元素,作为找不到匹配的内容片段的备用插槽,即在父组件中没有使用slot属性的内容会在这个备用插槽显示。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
react 路由Link配置详解
Nov 11 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 #Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 #Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 #Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 #Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 #Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 #Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 #Javascript
You might like
php 全文搜索和替换的实现代码
2008/07/29 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
js闭包用法实例详解
2016/12/13 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
urllib2自定义opener详解
2014/02/07 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
利用python实现AR教程
2019/11/20 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
优秀员工演讲稿
2014/05/19 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
三八节标语
2014/06/27 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
给学校的建议书400字
2015/09/14 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers