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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python修改注册表终止360进程实例
2014/10/13 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python sep参数使用方法详解
2020/02/12 Python
python中selenium库的基本使用详解
2020/07/31 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
护理专业推荐信
2013/11/07 职场文书
管道维修工岗位职责
2013/12/27 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS