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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js导出txt示例代码
Jan 14 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
js实现录音上传功能
Nov 22 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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
百度实时推送api接口应用示例
2014/10/21 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python实现转圈打印矩阵
2019/03/02 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python能做什么
2020/06/02 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
《哪吒闹海》教学反思
2014/02/28 职场文书
初中班主任寄语
2014/04/04 职场文书
旅游文化节策划方案
2014/06/06 职场文书
食品安全宣传标语
2014/06/07 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
监察建议书
2015/02/04 职场文书
护士求职自荐信范文
2015/03/04 职场文书
开工典礼致辞
2015/07/29 职场文书
中秋晚会致辞
2015/07/31 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python之matplotlib绘制折线图
2022/04/13 Python