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 相关文章推荐
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
js实现select下拉框选择
Jan 11 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
PHP 高手之路(一)
2006/10/09 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php单链表实现代码分享
2016/07/04 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python3中int(整型)的使用教程
2017/03/23 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
职业技术学校毕业生推荐信
2013/12/03 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
九年级历史教学反思
2016/02/19 职场文书
Python编写冷笑话生成器
2022/04/20 Python
Python实现简单得递归下降Parser
2022/05/02 Python