vue2父子组件通讯简记

1、组件的使用。

在页面中使用组件，第一步是导入组件路径。

	import EdditDate from "./residentTwo/EdditDate";

第二步，vue2需要使用components节点注册组件。

	export default {
		components: {
			EdditDate,
		},
    }

第三步，将注册的组件名以标签的形式在页面当中使用。

<EdditDate v-if="batEditShow" :batEditShow="batEditShow" :selectDate="editList" 
:maxDate="lastDate" @on-cancel = "batEditCancel" @on-submit = "batEditSubmit" ></EdditDate>

2、父组件向子组件的传值。

<EdditDate v-if="batEditShow" :batEditShow="batEditShow" :selectDate="editList">

props正常传值：  Eg：:batEditShow1="batEditShow2"

前者是show1是子组件接收父组件传值的容器名称，后者show2是从父组件传给子组件的值。

export default { //子组件props属性
    props: ['batEditShow','selectDate','maxDate'],
}

子组件接收父组件传值需要使用props自定义属性。使用此属性，可以让组件在使用时候，拥有不同的初始值，提高组件的复用性。

props属性特点：1、自定义属性的名字是使用者自定义的，可以是任何合法的名称。

2、props中的值，可以在组件中使用插值表达式直接取用，也可以在方法中this.[名称]使用。

3、props中的属性值，其性质是只读属性的，不能直接对props的值进行修改。(子组件无法通过props直接修改父组件的值)

props设置默认值：在声明自定义属性时候，可以使用default属性设置默认值。如果没有对自定义属性进行传值，那么init默认值为undifined。

    props: {
        batEditShow: {
            type: Boolean, //规定传值类型
            default: false,
            required: true,//表示必须传入数值
        },
        maxDate: {
            type: String,
            default: '2024-08-08'
        }
    },

3、子组件向父组件的传值。

子组件传值需要通过方法传递。传值语句：this.$emit(‘functionName’,data)

eg ：@on-submit = "batEditSubmit"     on-submit（functionName）：为方法名。this.resultDate（data）：为传递值

        //子组件传值代码        
        ok(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let date = new Date(this.formValidate.date);
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;  
                    let day = date.getDate();
                } else {
                    this.resultDate = 'fail'
                }
            })
            this.$emit('on-submit',this.resultDate)
        },

父组件接收方法： @on-submit = "batEditSubmit"

<EdditDate v-if="batEditShow" :batEditShow="batEditShow" :selectDate="editList"
  @on-cancel = "batEditCancel" @on-submit = "batEditSubmit" ></EdditDate>

父组件接收值： batEditSubmit(date){ }

			batEditSubmit(date){ //date对应的是子组件的传值this.resultDate
					console.log(date,'data')
			},

4、补充

在子组件中使用mounted生命周期钩子，在组件显示时进行一系列操作，需要在组件中加入v-if。否则在父组件加载时，子组件便会同时加载子组件。 v-if="batEditShow" ，当batEditShow为ture，也就是弹框modal显示出来的时候，显示出组件。