vue--传值

传值:(如果传的是引用类型,当值发生改变时所有绑定他的全都发生改变,如果传的时值类型,就只有他自己发生改变)

 

父传子:

父页面:父组件定义一个属性

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 } }

在子组件定义事件名和值,然后程序会跑到父组件的当前子组件标签下找定义的事件,然后再执行方法。

posted @ 2018-03-27 16:50  _Iniesta  阅读(130)  评论(0编辑  收藏  举报