(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>
说明:父子组件传值我是分开来写的,这样应该看得会清晰一点。当然也可以合并一起,没什么影响哈~