[ Vue ] 父子组件通讯

父子组建通讯，父组件引用子组件，子组件定义props，父组件按照props定义的规则传值，子组件定义事件this.$emit(事件名，参数 / 对象/数组) ，父组件通过相应的事件接收。

思路：
父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递。

• 定义父组件传递的数据属性
• 监听父组件传递的数据，并赋值给子组件
• 子组件传递事件通知父组件

子组件( 基于element-ui )

<template>
    <div>
        <el-row>
            <el-col :span="8" :offset="8">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.passWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确认</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name : "user-form",
    data(){
        return {
            form :{
                name : '',
                passWord : ''
            }
        }
    },
    props:{ //父组件通过props属性传递进来的数据
        name :{
            type : String,
            default : ''
        },
        passWord :{
            type : String,  
            default : ''
        },
    },
    mounted() {
        this.form.name = this.name; //加载页面默认父组件传进来的数据
        this.form.passWord = this.passWord;
    },
    watch: {
        name(v){  //监听父组件传递进来的数据，更改子组件的值
            this.form.name = v;
        },
        passWord(v){
            this.form.passWord = v;
        },
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            this.$emit( "input", 321); //子组件传递事件给父组件
            this.$emit("submit", "提交成功")
        }
    }
}
</script>

父组件

1. 调用子组件

<template>
    <div>
        <user-form
            :name="name"  //根据子组件定义来传属性
            :passWord="passWord"
            v-model="aaa"
            @submit="submit2" //接收事件
        ></user-form>
        <div>
            <el-button @click="changeName">改变name值为Wayne</el-button>
            <el-button @click="changePassword">改变password</el-button>
        </div>
    </div>
</template>

2. 引用子组件（并传数据）

<script>
import userForm from '../components/UserForm';  //引用子组件

export default {
	//引入子组件
    components : {
        userForm
    },
    data(){
        return {
            name : 'Judy',
            passWord : "123",
            aaa : 123,
        }
    },
    watch: {
        aaa (v){
            console.log( v )
        }
    },
    mounted() {
        console.log(this.aaa)
    },
    methods: {
        changeName(){
            this.name = 'Wayne' //父组件更改子组件的值-相应的子组件监听
        },
        changePassword(){
            this.passWord = "321123"
        },
        submit2(v){  //父组件接收子组件传递来的参数
            console.log(v)
            alert(v)
        }
    },

}
</script>