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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
基于Vue实现电商SKU组合算法问题
May 29 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
微信支付开发交易通知实例
2016/07/12 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
学习ExtJS border布局
2009/10/08 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python读写unicode文件的方法
2015/07/10 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python中Django文件上传方法详解
2020/08/05 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python xlsxwriter模块的使用
2020/12/24 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
寒假思想汇报
2014/01/10 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
大学生学年个人总结
2015/02/15 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书