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 cookies实现简单统计访问次数
Nov 24 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
JS制作简单的三级联动
Mar 18 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
js实现移动端轮播图
Dec 21 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 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和ACCESS写聊天室(一)
2006/10/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
python字符类型的一些方法小结
2016/05/16 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python容器类型公共方法总结
2020/08/19 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
大学信息公开实施方案
2014/03/09 职场文书
爱国演讲稿400字
2014/05/07 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书