VUE 父组件与子组件交互

1. 概述

1.1 说明

在项目过程中，会有很多重复功能在多个页面中处理，此时则需要把这些重复的功能进行单独拎出，编写公用组件(控件)进行引用。在VUE中，组件是可复用的VUE实例，此时组件中的data必须是一个函数，因为data是一个函数时，每次引用此组件时相当于重新对返回对象进行独立的拷贝(实例化/new)，如果data不是一个函数而是一个对象，那么多个引用同一组件时其中一个引用更改数据，其他引用中的数据都会更改。由于业务的不同，组件中的数据交互也会不同。

1.2 父组件向组件传递数据(Prop)

　　Prop可以在组件上注册一些自定义特性，当一个值传递给一个prop特性的时候，它就变成了那个组件(子组件)实例的一个属性，可以像访问data中的值一样去访问prop中的特性(属性列表)。任何类型的值都可以传给一个prop，prop使得其父子prop之间形成一个单向下行绑定，即数据是在父组件中更改后才绑定到子组件中，父组件每次发生更新，子组件中所有的prop都将会刷新为最新的值。

　　prop的常见书写方式如：

• • props: ['name', 'address', 'desc']
  • props: { name: String, address: String, desc: String, userInfo: Object }

　　1.2.1 子组件示例代码

　　子组件props中需要包含父组件流向的数据信息，以便显示在子组件中(可以直接页面绑定{{}}，也可数据接收处理)。

<template>
  <div class="child-wrap">
    <p>姓名：{{name}}</p>
    <p>性别：{{sex}}</p>
    <p>年龄：{{age}}</p>
  </div>
</template>
<script>
  export default {
    props:{
      name:{
        type:String,
        default:''
      },
      sex:{
        type:String,
        default:''
      },
      age:{
        type:Number,
        default:0
      }
    }
  }
</script>
<style scoped>
</style>

　　1.2.2 父组件示例代码

　　父组件中对子组件传递的数据像使用属性一样的去传递。

<template>
  <div class="parent-wrap">
    <child-component :sex="pSex" :name="pName" :age="pAge"></child-component>
  </div>
</template>
<script>
  import child from './child/child'
  export default {
    data() {
      return {
        pSex:'男',
        pName:'张三',
        pAge:28
      }
    },
    components: {
      "child-component": child
    },
  }
</script>
<style scoped>
</style>

1.3 父组件调用子组件事件

　　父组件直接访问子组件时，需要使用ref为子组件指定一个引用ID，渲染完成后即为指定子组件的实例，即可操作其内方法。

　　1.3.1 子组件示例代码

　　子组件methods中需要包含父组件所调用的子组件方法，可以传递参数值从父组件至子组件，以便来更改或操作子组件中的某些数据。

<template>
  <div class="child-wrap">
    <button @click="confirmClick">子组件按钮</button>
  </div>
</template>

<script>
  export default {
    methods: {
      confirmClick(val) {
        console.log(val)
      }
    }
  }
</script>

<style scoped>

</style>

　　1.3.2 父组件示例代码

　　在父组件中，子组件使用ref来注册引用信息，引用信息将会注册在父组件的$refs对象上。

　　注意：ref被用来给元素或子组件注册引用信息，如果是dom元素，引用只想的就是dom元素，如果是组件，引用就指向组件实例。

　　ref注册时间：ref本身是作为渲染结果被创建的，在初始渲染的时候不能够进行访问它。

<template>
  <div class="parent-wrap">
    <child-component ref="child"></child-component>
    <button @click="parentClick" class="btnClass">父组件按钮</button>
  </div>
</template>

<script>
  import child from './child/child'
  export default {
    data() {
      return {}
    },
    components: {
      "child-component": child
    },
    methods: {
      parentClick() {
        this.$refs.child.confirmClick("父组件调用");
      }
    }
  }
</script>
<style scoped>

</style>

1.4 子组件触发父组件事件

　　在子组件里用$emit向父组件触发一个事件，父组件监听这个事件。

　　1.4.1 子组件示例代码

　　子组件methods中去注册能够调用父组件方法的入口。

<template>
  <div class="child-wrap">
    <button @click="confirmClick">子组件按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      confirmClick() {
        this.$emit('child-click','点击了子组件按钮')
      }
    }
  }
</script>
<style scoped>
</style>

　　1.4.2 父组件示例代码

　　父组件的子组件中使用事件进行监听所需调用的方法，其中@后跟随的是子组件中注册的自定义事件名，后边所调用的方法为父组件中所定义的方法名。

<template>
  <div class="parent-wrap">
    <child-component @child-click="childClick"></child-component>
    <p>{{strChild}}</p>
  </div>
</template>
<script>
  import child from './child/child'
  export default {
    data() {
      return {
        strChild:''
      }
    },
    components: {
      "child-component": child
    },
    methods: {
      childClick(val) {
        this.$data.strChild=val;
      }
    }
  }
</script>
<style scoped>
</style>

　　注意：也可直接props传递方法进行子组件调用父组件方法。

2. 数据交互

　　在实际项目应用中，很多时候需要实时的获取到子组件中的数据信息，即子组件数据更改父组件数据。此时就需要监控子组件数据是否更改(watch)，而子组件则需要进行计算其数据集(computed)

2.1 代码示例

　　2.1.1 父组件示例代码

　　子组件每次调用时都需要是重新实例化的(每次调用子组件才会是单独的组件)，故可以使用v-if来进行处理

<template>
  <div>
    <Button
      type='primary'
      @click='addPerson()'>新增</Button>
    <Button
      type='primary'
      @click='editPerson()'>编辑</Button>

    <Modal
      v-model='childModalVisible'
      title="新增人员"
      width='800'
      @on-cancel='cancleModal'
      closable>
      <child-update v-if="childModalVisible" ref="childUpdate" :data='objChild' />
      <div slot='footer'>
        <Button @click='cancleModal'>取消</Button>
        <Button @click='submitModal' type='primary'>确定</Button>
      </div>
    </Modal>
    <Row style="margin-top: 20px; background: #f5f5f5;font-size: 40px;font-weight: 600;">
      <Col span="6">姓名：{{objChild.name}}</Col>
      <Col span="6">性别：{{objChild.sex}}</Col>
      <Col span="6">电话：{{objChild.phoneNo}}</Col>
      <Col span="6">地址：{{objChild.address}}</Col>
    </Row>
  </div>
</template>

<script>
  import ChildUpdate from '../components/updateChild'
  export default {
    name: "updateParent.vue",
    components: {
      ChildUpdate,
    },
    data(){
      return {
        childModalVisible:false,
        objChild:{}
      }
    },
    methods:{
      addPerson(){
        this.objChild={
          name: '',
          sex: 0,
          phoneNo: '',
          address:''
        };
        this.childModalVisible=true
      },
      editPerson(){
        this.objChild={
          name: '张三',
          sex: 0,
          phoneNo: '15136466666',
          address:'浙江省杭州市'
        }
        this.childModalVisible=true
      },
      cancleModal(){
        this.childModalVisible=false
      },
      submitModal(){
        if(this.$refs.childUpdate.validateForm('childPersonForm')){
          let bSubmit=true
          if (this.objChild.phoneNo) {
            const reg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (!reg.test(this.objChild.phoneNo)) {
              bSubmit=false
            }
          }
          if(bSubmit){
            this.childModalVisible=false
          } else {
            this.$Message.error('请输入正确的电话号码!')
          }
        } else {
          this.$Message.error('请输入正确的人员信息!')
        }
      }
    }
  }
</script>

<style scoped>

</style>

　　2.1.2 子组件示例代码

　　通过监控子组件数据更新去更新父组件数据信息，使用watch；

　　通过计算属性去判断父组件数据更新赋值于子组件数据，使用 computed

<template>
  <div>
    <Form
      ref='childPersonForm'
      :model='childPersonForm'
      :rules='formRules'
      :label-width='90'>
      <Row>
        <Col span='12'>
          <FormItem label='姓名' prop='name'>
            <Input
              v-model='childPersonForm.name'
              :maxlength='20'
              type='text'
              placeholder='请输入'></Input>
          </FormItem>
        </Col>
        <Col span='12'>
          <FormItem label='性别' prop='sex'>
            <Select v-model='childPersonForm.sex' clearable>
              <Option
                v-for='item in personSexOption'
                :value='item.value'
                :label='item.name'
                :key='item.value'>{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span='12'>
          <FormItem label='电话' prop='phoneNo'>
            <Input
              v-model='childPersonForm.phoneNo'
              :maxlength='11'
              type='text'
              @on-blur='telNoValidate'
              placeholder='请输入'></Input>
          </FormItem>
        </Col>
        <Col span='12'>
          <FormItem label='住址' prop='address'>
            <Input
              v-model='childPersonForm.address'
              :maxlength='20'
              type='text'
              placeholder='请输入'></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {
            name: '',
            sex: 0,
            phoneNo: '',
            address:''
          }
        },
      },
    },
    data() {
      // eslint-disable-next-line
      const nameRules = (rule, value, callback) => {
        const reg = /[0-9]/
        const regEn = /[`~!@#$%^&*()_+<>?:"{},\\.\/;'[\]]/im
        const regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im
        if (value === '') {
          callback(new Error('姓名不能为空'))
        } else if (regEn.test(value) || regCn.test(value)) {
          callback(new Error('姓名不能包含特殊字符'))
        } else if (reg.test(value)) {
          callback(new Error('姓名不能包含数字'))
        } else {
          callback()
        }
      }
      return {
        formRules: {
          name: [{ required: true, validator: nameRules, trigger: 'blur' }],
        },
      }
    },
    computed: {
      personSexOption() {
        return [{value:0,name:'男'},{value:1,name:'女'}]
      },
      childPersonForm() {
        console.log(this.data)
        return this.data
      },
    },
    watch: {
      childPersonForm: {
        handler(oldVal, newVal) {
          this.data.name = newVal.name
          this.data.sex = newVal.sex
          this.data.phoneNo = newVal.phoneNo
          this.data.address = newVal.address
        },
        deep: true,
      },
    },
    methods: {
      telNoValidate() {
        if (this.childPersonForm.phoneNo) {
          const reg = /^[1][3,4,5,7,8][0-9]{9}$/
          if (!reg.test(this.childPersonForm.phoneNo)) {
            this.$Message.error('请输入正确的电话号码!')
          }
        }
      },
      /**
       * 表单验证
       */
      validateForm(name) {
        let bReturn = false
        this.$refs[name].validate(valid => {
          if (valid) {
            bReturn = true
          } else {
            bReturn = false
          }
        })
        return bReturn
      },
    },
  }
</script>

<style scoped>

</style>

3. 父子组件生命周期钩子执行顺序

• 加载渲染过程
  • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程
  • 父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程
  • 父beforeUpdate->父updated
• 销毁过程
  • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed