1.props（父组件传递给子组件）
1.1 实现
如果你没有使用
父组件：
{{description}}
组件实例提供了一个自定义事件系统。父组件可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样。
官方文档实例
子组件:
子组件可以通过调用内置的
$emit 方法，通过传入事件名称来抛出一个事件：
{{ title }}
父组件：
... @enlarge-text="postFontSize += 0.1" /> 3.双向绑定v-model 2的例子v-on改为v-model 4.依赖注入 使用Prop有时会遇到逐级透传的问题。如下图所示： 通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。 虽然这里的 provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。 4.1 Provide (提供) 要为组件后代提供数据，需要使用到 provide() 函数： import { provide } from 'vue' export default { setup() { provide(/* 注入名 */ 'message', /* 值 */ 'hello!') } } provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。 第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref： import { ref, provide } from 'vue' const count = ref(0) provide('key', count) 提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。 4.2 Inject (注入) 要注入上层组件提供的数据，需使用 inject() 函数： 注意：provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢？就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。 在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。 5.ref 实现组件的子传父、父传子 5.1 组件上的 ref 组件上的ref获得的值是组件实例： ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上 fatherMethod() {this.$refs.child.childMethods();} 通过this.$refs.child找到的是子组件 多个组件实例可以结合${}使用 v-for="item in items" :key="item.id"> :types="item.id" :ref="`${item.id}Ref`" >
发表评论