vue中不常用的知识点(持续更新)

101 阅读2分钟

1.给html元素同时动态绑定多个属性


const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

使用不带参数的v-bind属性

<div v-bind="objectOfAttrs"></div>

2.app.config

每个应用实例都会暴露一个 config 对象,其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性.

例如:app.config.errorHandler 为应用内抛出的未捕获错误指定一个全局处理函数

app.config.errorHandler = (err, instance, info) => {
  // 处理错误,例如:报告给一个服务
}

app.config.compilerOptions.isCustomElement 用于指定一个检查方法来识别原生自定义元素 这个在微信公众号开发时,使用微信自定义标签比如 wx-open-launch-weapp时有用。

app.config.globalProperties 一个用于注册能够被应用内所有组件实例访问到的全局属性的对象

3.provide & inject

通常情况下,我们组件之间传参都是父组件向子组件传参,这时候我们会使用props。但是有时候我们需要传参的层级比较深,嵌套好几层,比如表单中的省市区组件,就有3-4层,这时候我们用props的话,就需要每一层组件都写props,这极容易导致错误。面对这种情况,我们可以使用pinia或者vuex。但是还有一种方法,就是使用provide&inject

image.png

provide

要为组件后代提供数据,我们需要使用provide()函数,如果不使用 <script setup>,请确保 provide() 是在 setup() 同步调用的

<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

provide() 函数接收两个参数。第一个参数被称为注入名,可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide(),使用不同的注入名,注入不同的依赖值。

Inject 要注入上层组件提供的数据,需使用 inject() 函数.同样的,如果没有使用 <script setup>inject() 需要在 setup() 内同步调用.

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

provide,第二个参数可以是任意类型,包括响应式的状态,比如一个 ref。提供的响应式状态的话,后代可以与其建立响应式联系