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 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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执行速度全攻略(下)
2006/10/09 PHP
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
常用DOM整理
2015/06/16 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
老生常谈javascript的面向对象思想
2017/08/22 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python实现大学人员管理系统
2019/10/25 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
《生命的药方》教学反思
2014/04/08 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
党校毕业心得体会
2014/09/13 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android