传值:(如果传的是引用类型,当值发生改变时所有绑定他的全都发生改变,如果传的时值类型,就只有他自己发生改变)
父传子:
父页面:父组件定义一个属性
users:[ {name:'张三',position:'web开发'}, {name:'张三',position:'web开发'} ]
然后在当前页的子页面标签下加
<helloworld v-bind:user="users"></helloworld>
子页面:先在引入
export default{ props:['users'] }
然后就可以用v-bind:user="users"的user调用父组件的users属性了,
写法:写法就和调用当前页面的属性一样,
<ul> <li v-for="u in user">{{u.name}},{{u.position}}</li> </ul>
******严谨写法:props:{传进来的东西:{ type:类型,required:true }}
子传父:
需要自定义事件;子组件的点击事件:
this.$emit('titleChange(这是事件名)','这是需要传的值!');
父组件:在跟子组件对应的标签下写自定义titleChange事件,执行updateChange()方法:
<app_herder v-on:titleChange="updateChange($event)" v-bind:str="string">
</app_herder> methods:{ titleChange:function(val){ this.string=val } }
在子组件定义事件名和值,然后程序会跑到父组件的当前子组件标签下找定义的事件,然后再执行方法。