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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
javascript new后的constructor属性
Aug 05 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue父子组件传值的一些坑
Sep 16 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
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
实时获取Python的print输出流方法
2019/01/07 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
小学安全教育主题班会
2015/08/12 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers