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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
python中as用法实例分析
2015/04/30 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python文件拆分与重组实例
2018/12/10 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android