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 基础知识 被自己遗忘的
Oct 15 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
几种响应式文字详解
May 19 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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 用数组降低程序的时间复杂度
2009/12/04 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
Java面试笔试题大全
2016/11/23 面试题
初中体育教学反思
2014/01/14 职场文书
九年级体育教学反思
2014/01/23 职场文书
干部鉴定材料
2014/05/18 职场文书
旷课检讨书范文
2015/01/27 职场文书
无故旷工检讨书
2015/08/15 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers