组件调用传值、调用函数

一、父子组件

prop向下传递，事件向上传递

子组件添加ref属性，父组件可以获取到子组件的实例（不建议）

插槽slot 作用域插槽

1.子组件获取父组件的值

<!--父组件-->
<child :num={num} />

// 子组件
export default {props: {num: Number},mounted() {console.log(this.num)}
}

props中的数据是VM实例传递过来的，只读

所以在子组件无法直接修改父组件通过props传来的值,但可以通过调用父组件方法修改

2.子组件调用父组件的方法

<!--父组件：向子组件传方法:-->
// <child @eventclick="emitEventClick" />

// 子组件：调用
this.$emit('eventclick', event, jsEvent, pos)

在子组件的方法中使用父组件传递过来的emitEventClick函数

emit意思是触发调用的意思,前面是函数名字，后面是参数

3.父组件获取子组件的值

//子组件：传值
this.$emit('eventclick',this.data)

<!--父组件-->
<child @eventclick="emitEventClick" />

//父组件
emitEventClick(data){// 函数中通过转递过来的值，将子组件中的值写入父组件中this.parent=data
}

使用子组件调用父组件的方法，把子组件的值作为this.$emit的参数

传给父组件的emitEventClick事件

4.父组件调用子组件的方法

<!--父组件-->
<child ref="mychild" />

// 父组件：调用
methods: {parentClick() {this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick}}

// 子组件
methods: {childClick(data) {console.log(data)}
}

注：若报错"TypeError: Cannot read property ‘childClick’ of undefined"

（可能是element抽屉打开前就调用了子组件方法），可尝试在父组件调用时添加 this.$nextTick

this.$nextTick(() => {this.$refs.mychild.childClick("我是子组件里面的方法哦");
})

二、非父子组件

使用状态管理

实例化一个公共vue实例