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 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JavaScript错误处理
Feb 03 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
基于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
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
javascript demo 基本技巧
2009/12/18 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
Python实现简单的HttpServer服务器示例
2017/09/25 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
10张动图学会python循环与递归问题
2021/02/06 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
热爱祖国演讲稿
2014/05/04 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
建国大业观后感800字
2015/06/01 职场文书
js之ajax文件上传
2021/05/13 Javascript