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操作表格方法
Dec 15 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
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
swoole和websocket简单聊天室开发
2017/11/18 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python如何制作缩略图
2019/04/30 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
美国钻石商店:Zales
2016/11/20 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
表彰会主持词
2014/03/26 职场文书
公司任命书范本
2014/06/04 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫