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
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。提供的响应式状态的话,后代可以与其建立响应式联系