时间:2021-05-26
如下所示:
<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绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一.Vue中父组件向子组件传值利用v-bind向子组件传值,子组件中利用props接受{{name}}{{age}}{{parentname}}{{abc}}/
本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下类似于用v-bind绑定HTML特性到一个表达式,也可以用v-bin
引子v-bind主要用于属性绑定,Vue官方提供了一个简写方式:bind,例如:一、概述v-bind主要用于属性绑定,比方你的class属性,style属性,v
一、v-bind初探它是一个vue指令,用于绑定html属性,如下:html属性不能使用双大括号形式绑定,只能使用v-bind指令......varvm=new
绑定HtmlClass我们可以传给v-bind:class一个对象,以动态地切换class。注意v-bind:class指令可以与普通的class特性共存:da