vue中使用props传值的方法


Posted in Javascript onMay 08, 2019

1.静态传值(在父组件中赋值好props中属性的值传递给子组件)

父组件

<template>
 <div>
  <input v-model="message">
  <child message="hello"></child>
 </div>
</template>
<script>
 import child from './components/child.vue'
 export default{
  components:{
   child
  }
 }
</script>

子组件

<template>
 <p>{{message}}</p>
</template>
<script>
 export default{
  props:['message'],
  data(){

  },
  methods:{
   fun:function(){

   }
  }
 }
</script>

结果:打印hello

2.动态传递(根据父组件中值的改变,props动态的改变子组件中的值)

父组件

<template>
 <div>
  <input v-model="message">
  <!--将childmessage与message通过v-bind指令绑定!-->
  <child v-bind:childmessage="message"></child>
 </div>
</template>
<script>
 import child from "./components/child.vue"
 export default{
  //构建child组件
  components:{
   child
  },
  data(){
   return {
    //初始化message
    message:''
   }
  }
 }
</script>

2.子组件

<template>
 <div>
  <p>childmessage is:{{childmessage}}</p>
 </div>
</template>
<script>
 export default{
  //将childmessage传递给child
  props:['childmessage']
 }
</script>

结果:两者同步改变

以上所述是小编给大家介绍的vue中使用props传值的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
vue实现学生信息管理系统
May 30 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue权限问题的完美解决方案
May 08 #Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 #Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 #Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 #Javascript
vue实现菜单切换功能
May 08 #Javascript
浅谈JS的原型和继承
May 08 #Javascript
You might like
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
回门宴答谢词
2014/01/13 职场文书
人口与计划生育责任书
2015/05/09 职场文书
结婚典礼致辞
2015/07/28 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers