vue里面v-bind和Props 利用props绑定动态数据的方法


Posted in Javascript onAugust 27, 2018

如下所示:

<add v-bind:子组件的值="父组件的属性"></add>
<div id="app"> 
  <add v-bind:btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {'btn': "123"}; //子组件同名的值被覆盖了 
        } 
      } 
    } 
  }); 
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

以上这篇vue里面v-bind和Props 利用props绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
You might like
php获取访问者IP地址汇总
2015/04/24 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
区三好学生主要事迹
2014/01/30 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
土建技术员岗位职责
2015/04/11 职场文书
毕业典礼致辞
2015/07/29 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
python计算列表元素与乘积详情
2022/08/05 Python