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 相关文章推荐
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
JS实现购物车特效
Feb 02 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
vue实现弹幕功能
Oct 25 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php微信公众平台开发类实例
2015/04/01 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP count()函数讲解
2019/02/03 PHP
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
vuex存取值和映射函数使用说明
2020/07/24 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python try 异常处理(史上最全)
2019/03/07 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python安装后的目录在哪里
2020/06/21 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
python中_del_还原数据的方法
2020/12/09 Python
python 实现有道翻译功能
2021/02/26 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
中职生自荐信
2013/10/13 职场文书
个人求职信范文
2014/05/24 职场文书
生日宴会策划方案
2014/06/03 职场文书
英语辞职信怎么写
2015/02/28 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫