父传子
- 父组件通过 props 将数据传递给子组件
- 子组件利用 $emit 通知父组件修改更新
父组件里面使用的子组件标签内会写一个自定义属性,这个自定义属性也是props,子组件也是通过props来接收
父组件:
<template>
<div class="app" style="border: 1px solid #000; margin: 10px">
我是APP组件
<!-- 1.给组件标签,添加属性方式 赋值 -->
<Son :title="content"></Son>
</div>
</template>
<script>
import Son from "./components/Son.vue";
export default {
// 组件名字
name: "App",
data() {
return {
content: "我是爸爸的儿子",
};
},
components: {
Son,
},
};
</script>
<style></style>
子组件:
<template>
<div class="son" style="border: 1px solid #000; margin: 10px">
<!-- 3.直接使用props的值 -->
我是Son组件 {{ title }}
</div>
</template>
<script>
export default {
// 组件名字
name: "Son-Child",
// 2.通过props来接受
props: ["title"],
};
</script>
<style></style>
什么是 prop
Prop 定义:组件上 注册的一些 自定义属性
Prop 作用:向子组件传递数据
特点:
⚫ 可以 传递== 任意数量 ==的prop
⚫ 可以 传递 ==任意类型 ==的prop
props 校验
思考:组件的 prop 可以乱传么?
作用:为组件的 prop 指定验证要求,不符合要求,控制台就会有错误提示 → 帮助开发者,快速发现错误
语法校验:
① 类型校验
② 非空校验
③ 默认值
④ 自定义校验
如果要进行语法校验,把props由数组形式改为对象形式
校验父组件传过来的数据是否符合要求,如果不符合要求就能及时报错。
子传父
子组件利用 $emit1通知父组件,进行修改更新
父组件:
<template>
<div class="app" style="border: 1px solid #000; margin: 10px">
我是APP组件
<!-- 1.给组件标签,添加属性方式 赋值 -->
<Son :title="content" @changeTitle="content = $event"></Son>
</div>
</template>
<script>
import Son from "./components/Son.vue";
export default {
// 组件名字
name: "App",
data() {
return {
content: "我是爸爸的儿子",
};
},
components: {
Son,
},
};
</script>
<style></style>
子组件:
<template>
<div class="son" style="border: 1px solid #000; margin: 10px">
<!-- 3.直接使用props的值 -->
我是Son组件 {{ title }}
<button @click="modify">父亲想要修改儿子</button>
</div>
</template>
<script>
export default {
// 组件名字
name: "Son-Child",
// 2.通过props来接受
props: ["title"],
methods: {
modify() {
this.$emit("changeTitle", "我爱爸爸");
},
},
};
</script>
<style></style>
emit是发送的意思,意思是子组件给父组件发送消息通知,父组件对子组件所发送的消息进行监听。目的是收到子组件所传过来的消息并且提供对应的处理函数,并且在父组件的处理函数的形参中可以拿到子组件传过来的消息。
↩︎