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 相关文章推荐
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
ant-design-vue按需加载的坑的解决
May 14 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类中的各种拦截器用法分析
2014/11/03 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Python类class参数self原理解析
2020/11/19 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
党员创先争优活动总结
2014/05/04 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
2015元旦标语横幅
2014/12/09 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android