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 相关文章推荐
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python列表与元组的异同详解
2019/07/02 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
护士长竞聘书
2014/03/31 职场文书
教师产假请假条
2014/04/10 职场文书
学生保证书范文
2014/04/28 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers