父子组件通讯props,$emit,ref

以下内容为自学过程中的记录，不一定准确完整。

---

父子组件传值

1.父组件向子组件传值

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

父组件

v-bind:father="father"

子组件

export default{
	props:{
		father:{
			required:true,
			type:[String,Number],
			default:1
		}
	}
}

2.子组件向父组件传值

子组件用$emit触发事件，父组件直接再子组件的自定义标签使用v-on监听子组件触发的自定义事件

子组件

<button @click="back">返回</button>
//……
export default {
	data() {
	    return {
	    	message:'子组件'
	    }
    }
    methods: {
      back() {
      	//this.$emit('childMessage', this.data)
	      this.$emit('close-add-dialog', false)
	    },
    }    
}

父组件

//监听子组件触发的事件
v-on:close-add-dialog="closeAddDialog"
//……
export default {
	data() {
	    return {
	    	message:''
	    }
    }
    methods: {
	      closeAddDialog(payload) {
	      	//this.message=playload
		      if (payload) {
		        //……
		      }
	    }
    }    
}

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

父组件

<club ref="reset"></club>
......
export default {
  ......
  methods: {
    handleReset(search) {
      this.$refs.reset.getList()
    }
  }
}

子组件

export default {
  ......
  methods: {
    getList() {
    	// ......
    },
  }
}

欢迎各位大佬前来指正