所谓父组件,就是里面引用了一个组件的组件,只有引用了子组件,他才能被称为父组件。
父组件可以通过props向子组件传参,子组件可以通过emit通过事件向父组件传参
在vue里面,数据默认为单向传递,为单向数据流,就是说父组件的值传给子组件,子组件是不可以修改的,只能父组件修改。这和双向绑定的双向数据流不同。
正常来说,vue里是父组件向子组件传参,子组件如果要向父组件传参就需要使用emit事件。
父向子传参
比如父组件要传test变量值到子组件NavBread中:
//父组件
<div class="fixed">
<nav-bread :value="test"></nav-bread>
</div>
test:‘hello’
//子组件
export default {
props:['value'],
data() {}
这样就很容易地将父组件的test变量传到了子组件NavBread中
子向父传参
子组件通过emit传递参数(sex)到父组件。
//子组件
<div @click="passSex()"></div>
passSex(){
this.$emit('childEmit',this.sex)
}
//父组件
<nav-bread @childEmit="getSex"></nav-bread>
getSex(sex){
this.sex=sex;
console.log(this.sex)
}
这里子组件定义一个方法,调用emit,这个$emit可以创建一个自定义事件childEmit加上一个参数sex,这个事件与参数是可以被父组件所接收的。然后父组件监听这个事件,一旦子组件调用这个方法父组件就能捕捉到,并且调用自身的一个方法getSex来得到子组件传过来的参数sex,并将子组件的sex赋值到自己的sex,这样就完成了子组件向父组件传参。
如果说有多个组件要用到这个变量,那么最好的方法并不是一个一个传递下去,而是使用vuex状态管理,定义到vuex全局变量中