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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
chrome原生方法之数组
Nov 30 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
微信小程序模板template简单用法示例
Dec 04 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
php中定义网站根目录的常用方法
2010/08/08 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
js 文件引入实现代码
2010/04/23 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python 实现选择排序的算法步骤
2018/04/22 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
在Python中COM口的调用方法
2019/07/03 Python
python 实现识别图片上的数字
2019/07/30 Python
django创建超级用户过程解析
2019/09/18 Python
python小项目之五子棋游戏
2019/12/26 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
护理学毕业生自荐信
2013/10/02 职场文书
职专应届生求职信
2013/11/16 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
调查研究项目计划书
2014/04/29 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL