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 相关文章推荐
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
简单分析js中的this的原理
Aug 31 Javascript
element-ui 本地化使用教程详解
Oct 28 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
Banner程序
2006/10/09 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
web css实现整站样式互相切换
2013/10/29 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python中私有函数调用方法解密
2016/04/29 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
django如何通过类视图使用装饰器
2019/07/24 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
财产公证书格式
2014/04/10 职场文书
交通事故私了协议书
2014/04/16 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python