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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
用js实现in_array的方法
Nov 05 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
js获取ip和地区
Mar 10 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 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+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jquery offset函数应用实例
2012/11/14 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
基于python if 判断选择结构的实例详解
2019/05/06 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
经济管理自荐书
2014/06/09 职场文书
小学思想品德教学反思
2016/02/24 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Python OpenCV形态学运算示例详解
2022/04/07 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android