vue里面v-bind和Props 利用props绑定动态数据的方法
2018-08-27 11:08
866 查看
如下所示:
<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绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue里面v-bind和Props 利用props绑定动态数据
- vue中属性动态绑定数据方法
- vue遇到过的坑(父组件向输入框组件传值进去,然后子组件利用传进来的数据进行数据绑定的问题与解决方法)
- 关于数据动态绑定问题的解决方法
- excel每一条数据 生成成一个word模板,(模板里面的字段需要动态的绑定excel属性)
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用。 (FromView)
- 在工厂模式里面利用反射机制动态调用对象方法
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- 静态页面HTML绑定动态数据.aspx,用document.write的方法!
- C#利用Lambda和Expression实现数据的动态绑定
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- Android 服务(service)的生命周期以及利用bindservice调用服务里面的方法
- 利用override多态原理实现对相似页面的后台代码的抽象,并实现动态GridView动态列数据绑定
- asp.net下的“Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用。”错误的一个可能的成因
- GridView 数据绑定扩展-- 动态添加数据列,绑定方法
- C#利用Lambda和Expression实现数据的动态绑定
- ASP.NET中dropdownlist 动态绑定数据的二种方法
- Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用。