前端学习笔记（14）-Vue3组件传参

1.props（父组件传递给子组件）

1.1 实现

如果你没有使用 ，props 必须以 props 选项的方式声明，props 对象会作为 setup() 函数的第一个参数被传入：

在子组件中：

export default {props: {title: String,age: Number }setup(props) {console.log(props.title)}}

在父组件中：

一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

这种情况下，我们可以使用 v-for 来渲染它们：

使用 v-bind (简写’:’)来传递动态 prop 值

1.2 单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

2.emit（子组件传递给父组件）

1. 在子组件中，通过 emit() 来触发事件，通知父组件处理

2. 在父组件中，监听子组件事件

实例子组件：

组件传参export default {name: 'test',emits: ['changeMsg'],setup (props, { emit }) {function clickHandle () {emit('changeMsg', '我是子组件值')}return {clickHandle}}}; 

父组件：

{{description}}
import HelloWorld from '../components/HelloWorld.vue'import { ref, defineComponent } from 'vue'export default defineComponent({name: 'Home',components: { HelloWorld },setup() {const description = ref('Default message')const childEvent = (msg: string): void => {description.value = msg}return {description,childEvent,}},})

组件实例提供了一个自定义事件系统。父组件可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样。

官方文档实例

子组件:

子组件可以通过调用内置的 $emit 方法，通过传入事件名称来抛出一个事件：

{{ title }}
Enlarge text

父组件：

3.双向绑定v-model

2的例子v-on改为v-model

4.依赖注入

使用Prop有时会遇到逐级透传的问题。如下图所示：

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。

虽然这里的