一.父组件--->子组件 props
1.特点:props是用于父组件向子组件传递数据信息（props是单向绑定的，即只能父组件向子组件传递，不能反向
2.用法：父组件中使用子组件时，绑定要传递的数据，父组件中对要绑定的数据添加方法或者值
子组件通过props接收值
3.示例
// 父组件 <template> <div>我是父组件</div> <add-configuration :message="checkList" /> </template> import addConfiguration from ‘@/components/addConfiguration.vue‘ export default { components:{ addConfiguration }, data() { return { checkList: [] } }, methods:{ getList() { .... this.checkList= ... } } }
// 子组件 <template> <div>我是子组件</div> <div>我是父组件传递过来的数组{{message}}</div> </template> export default { props: { message: { type: Array, default: () => [] } }, data() { return { } } }
二.子组件--->父组件 $refs
1.特点：父组件获取子组件的方法或者属性，$refs 数据是双向绑定的，子组件可以向父组件传递方法，父组件可以向子组件传递参数
2.用法：父组件通过子组件中 的ref标识来获取子组件的方法或者属性
this.$refs.标识.方法
3.示例：
// 父组件 <template> <div>我是父组件</div> <add-configuration ref="configurationRef" /> </template> import addConfiguration from ‘@/components/addConfiguration.vue‘ export default { components:{ addConfiguration }, data() { return { } }, methods:{ getList() { this.$ref.transforFntoFather() } } }
// 子组件 <template> <div>我是子组件</div> </template> export default { data() { return { } }, methods:{ transforFntoFather() { .... } } }
三.子组件--->父组件 $emit
1.特点：父组件向子组件通信，而通过e m i t 实 现 子 组 件 向 父 组 件 通 信 。 对 于 emit 实现子组件向父组件通信
2.用法：
父组件中的子组件绑定一个事情@事件名
父组件处理事件方法
子组件调用
this.emit(事件名)
3.示例：
// 父组件 <template> <div>我是父组件</div> <add-configuration @fatherMethod="initialData" /> </template> import addConfiguration from ‘@/components/addConfiguration.vue‘ export default { components:{ addConfiguration }, data() { return { } }, methods:{ initialData() { .... // 请求api接口返回数据 } } }
// 子组件 <template> <div>我是子组件</div> </template> export default { data() { return { configCategory:1 } }, mounted(){ this. getListData() } methods:{ getListData() { this.$emit(‘fatherMethod‘,this.configCategory) } } }