Vue父组件与子组件创建并实现传值、更新值、子组件调用父组件方法等操作

前言

在Vue开发项目中，当一个页面的代码量开始增加时，需要考虑到将部分业务抽成一个新的组件，这时候就涉及到两个组件之间传值以及影响问题，本文将介绍一下内容：

• 子组件的创建以及调用

• 父组件如何传值给子组件

• 子组件如何接收父组件传来的值

• 子组件如何影响父组件

子组件的创建就是新建一个新的Vue文件，并将需要的业务代码，如表格Table，抽屉Drawer，上传组件Upload等放在子组件中，在父组件中进行调用并传值。

1. 创建子组件，并接收父组件传来的值

这是子组件，子组件中放置了一个Element-UI的抽屉组件Drawer，由父组件传入drawerShow,让子组件中的抽屉Drawer显示出来

<template>
    <el-drawer
            title="抽屉"
            :visible.sync="drawerShow"
            direction="rtl">        
    el-drawer>
template>

<script>
    export default {
        name: "Drawer",
        props: {
            drawerShow: {
                type: Boolean,
            }
        },
        data() {
            return {
                drawerShow: false
            }
        }
        watch: {
            drawerShow: {
                handler(newValue) {
                    this.drawerShow = newValue
                }
            }
        },
	}
script>
<style scoped>
style>  

---

*** 扩展 ***

a. 上述中的props

props: {
    drawerShow: {
    	type: Boolean,
    }
},

props是接收父组件传值的写法，传送进来是drawerShow，接收类型是Boolean。

常用接收类型有：布尔型Boolean，整数型Integer，字符串String，数组Array，对象Object

b. 上述中的watch用于监控变量值的变化，它监控的变量需要在data中进行定义，其有handler、immediate、deep操作，handler是一个函数，在变量值发生变化时，会执行此方法。

watch特点:

• 如果需要父组件传值过来时就改变其值，需要设置immediate=true，如下：

watch: {
    drawerShow: {
        handler(newValue) {
        	this.drawerShow = newValue
        },
        immediate: true
    }
},

• 如果监控的实例是对象类型，需要监控对象内部的值的话，则需要使用deep=true，当对象内部的值发生更改时，会触发handler方法

data() {
	return {
		cityName: {
			id: 1,
			name: 'Guangzhou'
		}
	}
},
watch: {
    cityName: {
        handler(newName, oldName) {
        	
        },
        immediate: true,
        deep: true
    }
},

---

2. 在父组件中调用子组件

在父组件中使用标签调用子组件，需要先将子组件import进来，然后声明component，再进行调用。

<template>
    <Drawer>Drawer> // 此处调用子组件
template>

<script>
	import Drawer from "./drawer/Drawer"; // 引入子组件
    export default {
        name: "FatherComponent",
        components: {  // 声明组件
        	Drawer
        }, 
        data() {
            return {
                drawerShow: false
            }
        }
	}
script>
<style scoped>
style>  

3. 父组件传值给子组件

<Drawer :drawerShow="drawerShow">Drawer> // 此处调用子组件

在父组件中使用子组件的标签中，定义:drawerShow="drawerShow"，冒号后定义的是在子组件对应的参数，子组件根据这个变量名称进行接收值，双引号时父组件传送的值。

4. 子组件影响父组件

子组件影响父组件的方法有很多种，这里列举出几种：

a. 子组件提交事务，父组件调用函数修改

<Drawer :drawerShow="drawerShow" @func="updateInfo"></Drawer> // 此处为父组件调用子组件，定义方法updateInfo

// 父组件定义方法：
methods: {
	updateInfo() {
		this.drawerShow = false // 更改值
	}
}

// 子组件提交事务：
this.$emit("func", "请修改值") // func为父组件定义的方法识别名

b. 子组件提交事务，父组件双向绑定修改

<Drawer :drawerShow.sync="drawerShow"></Drawer> // 此处调用子组件，使用sync进行双向绑定

//相当于
<Drawer :drawerShow="drawerShow" @update:drawerShow="newVal"></Drawer>

// 子组件提交事务：
this.$emit("update:drawerShow", false) // 子组件提交更新事务，请求修改值为false