小程序学习07—— uniapp组件通信props和$emit和插槽语法
目录
一 父组件向子组件传递消息
1.1 props
（a）传递静态或动态的 Prop
（b）单向数据流
二 子组件通知父组件
2.1 $emit
（a）定义自定义事件
（b）绑定自定义事件
三 插槽语法
3.1 Slot
（a）插槽内容与出口
（b）举例来说
一 父组件向子组件传递消息
1.1 props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
| 选项 | 类型 | 说明 |
|---|---|---|
| type | String 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、 Symbol ，任何自定义构造函数、或上述内容组成的数组 | 会检查一个 prop 是否是给定的类型，否则抛出警告，复杂数据类型需要通过 PropType 标记类型，详见。 |
| default | any | 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 |
| required | Boolean | 定义该 prop 是否是必填项。 |
| validator | Function | 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出。 |
示例：
<template>
<view>
<!-- 我是子组件componentA -->
<view>{{age}}</view>
</view>
</template>
<script>
export default {
props: {
// 检测类型 + 其他验证
age: {
type: Number,
default: 0,
required: true,
validator: function(value) {
return value >= 0
}
}
}
}
</script>
<template>
<view>
<!-- 我是父组件 -->
<componentA :age="10"></componentA>
</view>
</template>
（a）传递静态或动态的 Prop
- 可以像这样给 `prop` 传入一个静态的值：
<navbar name="navbar组件" />
-
可以通过
v-bind或简写 : 动态赋值，例如：
- 在使用
<script setup>的单文件组件中，props 可以使用defineProps()宏来声明，还可以使用对象的形式：
（b）单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
二 子组件通知父组件
2.1 $emit
（a）定义自定义事件
父组件可以通过 v-on (缩写为 @) 来监听事件
（b）绑定自定义事件
直接使用 `$emit` 方法触发自定义事件。当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。
三 插槽语法
3.1 Slot
（a）插槽内容与出口
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
（b）举例来说
这里有一个 <FancyButton> 组件，可以像这样使用：
<FancyButton>
Click me! <!-- 插槽内容 -->
</FancyButton>而 <FancyButton> 的模板是这样的：
<button class="fancy-btn">
<slot></slot> <!-- 插槽出口 -->
</button>组件最终渲染出的 DOM 是这样：
<button class="fancy-btn">
Click me!
</button>作为一条规则，请记住： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
