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 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
详解python3百度指数抓取实例
2016/12/12 Python
神经网络python源码分享
2017/12/15 Python
对Python实现累加函数的方法详解
2019/01/23 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
售后服务承诺书
2014/03/26 职场文书
村干部培训方案
2014/05/02 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
担保贷款承诺书
2015/04/30 职场文书
我的1919观后感
2015/06/03 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
Android Studio 计算器开发
2022/05/20 Java/Android