vue3-组件传参及计算属性

​个人主页：前端青山
系列专栏：Vue篇
人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-组件传参及计算属性

目录

vue3中的组件传参

1、父传子

2、子传父

toRef 与 toRefs

vue3中的计算属性

vue3 中的 watch监听器

vue3中的组件传参

组件关系：

父子 props、$panrent

子父 emit自定义事件 $children $refs

兄弟 eventbus中央事件总线 vue3如果需要实现eventbus 安装第三方库mitt

跨层级 provider inject

组件状态共享工具： vuex pinia

1、父传子

• 在父组件中给子组件设置自定义属性 tit，将要传递的参数赋值给tit属性

​

• 在子组件中接收传过来的属性通过props ,这个和vue2 一样没有变化。

​

2、子传父

• 给子组件绑定自定义事件，然后在setup中定义该事件对应的方法，因为setup中没有this ,this为undefined,所以vue的开发者为了解决该问题，在setup中提供了2个形参，prop和context

  • props 为父传子的参数

  • context 上下文对象，里面有emit 方法，可以实现子传父

• 子组件中多了 emits选项，该选项类似于props,接收父组件给子组件绑定的自定义方法，如果不加该选项，vue3 会提示警告。但不影响功能

• 在父组件接收自定义事件，该事件对应的执行函数的形参就是传过来的数据，这个就和vue2一样啦。

  toRef 与 toRefs

  定义：toRef 创建一个ref 响应数据

  语法：let name = toRef(person，'name') 将响应对象person中的name属性单独拿出来变成响应属性。

  应用：一般用于将响应对象中的某个属性单独提供给外部使用

• 如下是使用toRef 前的代码： 插值表达式模板中的 person 有点繁琐

• 
  ​
  

• 如下是使用toRef 后 的代码，

• 
  ​
  
  

• 使用toRefs 可以将对象中的多个属性转换成响应数据，代码如下：

• 
  ​
  
  

  关于数据响应式设置的问题：

  1、如何设置一个响应式数据？ ref reactive

  2、如何将非响应式数据转为响应式数据？ toRef toRefs

  3、如何将数据设置为只读数据？不能够修改 readOnly

vue3中的计算属性

同vue2不同，使用计算属性需要引入computed 方法

​

vue3 中的 watch监听器

vue3 中的watch 也是 组合式api中的一个方法，所以使用时，需要引入

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。