vue父组件向子组件(props)传递数据的方法


Posted in Javascript onJanuary 02, 2018

vue父组件向子组件(props)传递数据的方法 

vue页面结构

在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的“sessionStorage”和“localStorage”上赋值,这是页面之间传递的方法。

随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案。

最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(props,组件通信,slot),这次就说第一种方式如下:

a父组件内容:

引入b子组件import b form 'b.vue'

components: {'b-div': b} // 注册,只能在当前a组件里使用
<b-div :propsname='datas(向子组件传递的参数)'></b-div>

b子组件内容:

<template> <div>{{propsname}}</div> </template>
export default{
props: ['propsname'],
data(){}
}

只要在a组件中的datas的值一直在改变,在b子组件中props就会实时监听propsname的变化,在页面上也会做出相应的渲染,使用方式也是{{propsname}}。

PS:下面给大家介绍下vue父子组件间传值(props)

先定义一个子组件,在组件中注册props

<template>
  <div>
    <div>{{message}}(子组件)</div>
  </div>
</template>
<script>
export default {
  props: {
    message: String //定义传值的类型<br>  }
}
</script>
<style>
</style>

在父组件中,引入子组件,并传入子组件内需要的值

<template>
  <div>
    <div>父组件</div>
    <child :message="parentMsg"></child> 
  </div>
</template>
<script>
import child from './child' //引入child组件
export default {
  data() {
      return {
        parentMsg: 'a message from parent' //在data中定义需要传入的值
      }
    },
    components: {
      child
    }
}
</script>
<style>
</style>

这种方式只能由父向子传递,子组件不能更新父组件内的data

总结

以上所述是小编给大家介绍的vue父组件向子组件(props)传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
svg动画之动态描边效果
Feb 22 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
基于wordpress的ajax写法详解
Jan 02 #Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 #Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 #Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 #Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 #Javascript
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
You might like
PHP伪静态写法附代码
2008/06/20 PHP
PHP入门学习笔记之一
2010/10/12 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
javascript 播放器 控制
2007/01/22 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python与R语言的简要对比
2017/11/14 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
本科毕业生自我鉴定
2013/11/02 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
社区综治工作汇报
2014/10/27 职场文书
2014年库房工作总结
2014/11/26 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript