vue里面v-bind和Props 利用props绑定动态数据的方法
更新时间:2018年08月27日 11:08:54 作者:开发小盆友
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
如下所示:
<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绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3发送post请求出现400 Bad Request报错的解决办法
这篇文章主要给大家介绍了关于Vue3发送post请求出现400 Bad Request报错的解决办法,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
这篇文章主要介绍了详解使用VUE搭建后台管理系统(vue-cli更新至3.0),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论