Vue-cli 中是如何进行父子组件间传值的

（1）子组件 — data —> 父组件

父组件（Regist.vue）部分：

<template>
    <div class="regist">
        这里是注册页面！
        <!-- 2、通过绑定属性来传值给子组件 -->
        <RegistInfo :msg="msg"/>  
    </div>
</template>

<script>
// 导入子组件
import RegistInfo from "../components/RegistInfo.vue"

export default {
    name: "regist",
    components: {
        RegistInfo	// 子组件名
    },
    data() {
        return {
            msg: "撒拉嘿~"	// 1、定义要传递的数据
        }
    }
 }
 </script>

---

子组件（RegistInfo.vue）部分：

<template>
    <div class="regist">
        <h3>用户名</h3>
        <h3>手机号码</h3>
        <h3>验证码</h3>
        <!-- 2、渲染值 -->
        <h6>{{ msg }}</h6>
    </div>
</template>

<script>
export default {
    name: "regist",
    // 1、通过props来接收父组件的值
    props: {
  		// 变量名:变量类型(String/Number/Boolean/Null/ Object/Array)
        msg: String
    }
}
</script>

---

（2）父组件 — data —> 子组件

子组件（Regist.vue）部分：

<template>
    <div class="regist">
        <h3>用户名</h3>
        <h3>手机号码</h3>
        <h3>验证码</h3>
        <!-- 1、通过 点击--事件 来触发传值 -->
        <button @click="sendmessage">立即找回</button>
    </div>
</template>

<script>
export default {
    name: "regist",
    methods: {
        sendmessage:function(data) {
        	// 2、由this.emit("自定义方法名",发送内容)
            this.$emit("getmsg","撒拉嘿呦！");
        }
    }
}
</script>

父组件（Regist.vue）部分：

<template>
    <div class="regist">
        这里是注册页面！
        <!-- 1、通过绑定事件来获取子组件的值——>@子组件里自定义方法名="父组件里接收的方法名" -->
        <RegistInfo @getmsg="getmsgFromChild"/>
        <h6>{{ getmsg }}</h6>
    </div>
</template>

<script>
import RegistInfo from "../components/RegistInfo.vue"

export default {
    name: "regist",
    components: {
        RegistInfo
    },
    data() {
        return {
            getmsg: "",
        }
    },
    methods: {
    	// 2、定义个方法接收子组件，data就是子组件发送的内容
        getmsgFromChild(data) {
            console.log(data);
            this.getmsg = data;
        }
    }
}
</script>

---

说明：父子组件传值我是分开来写的，这样应该看得会清晰一点。当然也可以合并一起，没什么影响哈~