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的map与get方法详解
Nov 04 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
js实现模糊匹配功能
Feb 15 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
详解webpack 多入口配置
Jun 16 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
php图片验证码代码
2008/03/27 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
图片之间的切换
2006/06/26 Javascript
动态调用css文件——jquery的应用
2007/02/20 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python解释器spython使用及原理解析
2019/08/24 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
法学毕业生自荐信
2013/11/13 职场文书
剪彩仪式主持词
2014/03/19 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
办公室管理规章制度
2015/08/04 职场文书
golang import自定义包方式
2021/04/29 Golang