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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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与javascript对多项选择的处理
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP 强制下载文件代码
2010/10/24 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
常用jQuery代码分享
2015/07/14 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
三个儿子教学反思
2014/02/03 职场文书
音乐教学随笔感言
2014/02/19 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2014年药店工作总结
2014/11/20 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis