Vue 使用Props属性实现父子组件的动态传值详解


Posted in Javascript onNovember 13, 2019

如下所示:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="prop-example-2">
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>
<script>
  Vue.component('child',{
    props:['myMessage'],
    template:'<span>{{ myMessage }}</span>'
  })
  new Vue({
    el:'#prop-example-2',
    data:{
      parentMsg:'Messsssssssssssss'
    }
  })
</script>
</body>
</html>

这里需要注意的是在html中的 my-message 就是scrpit中的 myMessage。因为:

HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)

以上这篇Vue 使用Props属性实现父子组件的动态传值详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
Jquery异步上传文件代码实例
Nov 13 #jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 #Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 #Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 #Javascript
You might like
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python编写爬虫小程序
2015/05/14 Python
python类装饰器用法实例
2015/06/04 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
什么是组件架构
2016/05/15 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
秋季运动会稿件
2014/01/30 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年工会工作总结
2014/11/12 职场文书
老乡聚会通知
2015/04/23 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书