vue教程二 vue组件(3)
给属性传递数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> <style type="text/css"> </style> </head> <body> <div id="app"> <!-- 外部传入属性值 --> <my-button color="red"></my-button> </div> <script> //全局定义组件 Vue.component('my-button',{ template:'<button v-bind:style="style">this is my button</button>', props:['color'], //设置组件属性color computed: { style(){ return {backgroundColor:this.color}; //内部使用属性color } } }); var app = new Vue({ el: '#app', data: { } }); </script> </body> </html>
还可以定义组件属性的类型，默认值，是否必须，添加属性验证函数
您已经看到，当数据对象、方法或计算属性的值发生更改时，也会更新模板，这对props也适用。当设置组件上的props将其绑定到一个值时，可以使用vbind，然后当该值发生更改时，组件中使用它的任何地方也会更新
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> <style type="text/css"> </style> </head> <body> <div id="app"> <!-- 外部传入属性值 --> <my-button my-alt="1111" color="red" text="1212" v-bind:price="price"></my-button> <p>{{price}}</p> </div> <script> //全局定义组件 Vue.component('my-button',{ template:'<div v-bind:alt="myAlt"><button v-bind:style="style">{{text}} </button> <span>{{price}}</span></div>', props:{ color:{ type:String, default :"blue", required:false, }, text:[String,Number] ,//如果一个属性是多种类型中的一种，那么您可以传入数组中的所有有效类型 price:{ type:Number, default:0.00, required:true, validator(val){ //验证属性price必须大于等于0 return val>=0 } }, myAlt:String, //注意vue会帮我们自动转换驼峰命名为"-"方式,在元素上使用的属性应该为:my-alt }, computed: { style(){ return {backgroundColor:this.color}; //内部使用属性color } }, }); var app = new Vue({ el: '#app', data: { price:0, }, created() { let that=this; setInterval(function(){ that.price++; },1000); } }); </script> </body> </html>
数据通过一个props从父对象传递给子对象，当该数据在父对象中被更新时，传递给子对象的道具也被更新。但是，您不能从子组件修改该props。这就是所谓的单向绑定，它可以防止组件可能无意中改变父组件的状态
所有 props 都在子组件和父组件之间形成一个单向往下流动的数据绑定：当父组件中的属性更新时，数据就会向下流动到子组件，但是反过来，子组件属性更新时，父组件并不会感知到子组件的数据变化。这种机制可以防止子组件意外地修改了父组件的状态，造成应用程序的数据流动变得难于理解。
此外，每次父组件更新时，子组件中所有的 props 都会更新为最新值。也就是说，你不应该试图在子组件内部修改 prop。如果你这么做，Vue 就会在控制台给出警告。
【前端全套视频教程】https://weihaibao.taobao.com/m/QWYr3w57z 点击链接，跟多教程请浏览本店（价格便宜公道，买不了吃亏买不了上当）
