vue的props实现子组件随父组件一起变化


Posted in Javascript onOctober 27, 2016

本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时,也会传导给子组件:

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的缩写语法通常更简单:<child :my-message="parentMsg"></child>

实例:

<!DOCTYPE html>
<html lang="en">

<head>
 <script type="text/javascript" src="vue.js"></script>
 <meta charset="UTF-8">
 <title>vue的props实现父组件变化子组件一起变化</title>
</head>

<body>
<div id="app1">
 <input v-model="messsage" > <!--input绑定实例中data中的message-->
 <div >
 <child v-bind:my-message="messsage"></child> <!--子组件绑定实例中data中的message-->
 </div>

</div>

 <script>
 Vue.config.debug = true;
 Vue.component('child',{
  props: ['myMessage'], //VUE实例中myMessage 等价于my-message
  template: '<span>{{ myMessage }}</span><br>'
 });
 var vm = new Vue({
  el: '#app1',
  data:{
  messsage:'hello you are a good boy!'
  }
 });
 </script>
</body>

</html>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
小程序实现筛子抽奖
May 26 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 #Javascript
简单理解vue中Props属性
Oct 27 #Javascript
利用React-router+Webpack快速构建react程序
Oct 27 #Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 #Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 #Javascript
简单理解vue中track-by属性
Oct 26 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python更新列表的方法
2015/07/28 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python计算信息熵实例
2020/06/18 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
安全协议书
2014/04/23 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫