author :vita2333
link :https://juejin.im/post/689231...
I've been looking forward to vue3, As soon as it was released, I started to experience , Here is a record of a few of the unusual small holes on the Internet ~
Custom global parameters
Definition :
// main.js
const app = createApp(App)
app.config.globalProperties.$test = 'test'
except setup()
You need to get the instance first , Other places can go directly through $test
Use :
<tempalte>
<div>{{ $test }}</div>
</tempalte>
<script>
import { getCurrentInstance } from 'vue'
export default {
setup() {
const test = getCurrentInstance()?.appContext.config.globalProperties.$test
console.log('test===')
console.log(test)
},
}
</script>
Vite adopt alias Alias reference
stay webpack
in , To configure src
Its alias is @
, It can be written like this :
// quote src/views/PageOne.vue
import PageOne from '@/views/PageOne.vue'
Copy code
If you use Vite
, You need to make the following changes :
// vite.config.js
module.exports={
alias: {
'/@/': path.resolve(__dirname, './src'),
},
}
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["src/*"],
"/@/views/*": ["src/views/*"]
}
}
}
import PageOne from '/@/views/PageOne.vue'
More standardized props and emits
stay vue3
in , The parent-child component transfers values props
and emits
The writing method is more standardized ( More uniform naming ), Embodied in :
v-model
The change of
<template>
<child-component v-model:value="myValue"></child-component>
</template>
v-model:value
Equate to props:'value'
and emits('update:value')
- You need to specify the
emits
For ease of management , It is suggested that emits
Define all of the emit
export default {
emits: ['update:value', 'otherEmit'],
setup(props, { emit }) {
emit('update:value')
emit('otherEmit')
},
}
track attrs and slots
I thought I could pass watch()
Function directly watch(()=>attrs.xxx)
, It turns out that it can't . There are some on the official website , At first, I didn't pay attention to it :
attrs and slots It's a state object , They are always updated as the component itself updates . This means that you should avoid deconstructing them , And always with attrs.x or slots.x Method reference of property. Please note that , And props Different ,attrs and slots It's nonresponsive . If you're going to base it on attrs or slots Change application side effects , Then it should be in onUpdated Do this in the lifecycle hook .
So respond to it attrs
and slots
, Need :
import { onUpdated, reactive, watch, watchEffect } from 'vue'
export default {
setup(props, { attrs }) {
function _handleAttrsChange() {
console.log('attrs===')
console.log(attrs)
}
onUpdated(() => {
_handleAttrsChange()
})
// props and data It can be used normally. watch function
watchEffect(() => {
console.log('propsXxx===')
console.log(props.xxx)
})
const state = reactive({ count: 0 })
watch(() => state.count, (now, old) => {
//
})
},
}
VueRouter Do not use directly containing props The components of
I have an address list AddressList
, Need to pass through props
Receive parent parameters :
// router.js
export default {
name: 'AddressList',
props: {
propName: String,
},
}
By calling the component , No problem . But the configuration is vue-router
An error will be reported :
export default {
routes: [
{
path: 'address_list',
component: () => import( 'AddressList.vue'),
},
],
}
TypeError: Cannot add property __props, object is not extensible
Since you can't directly treat a component as route
Use , Well, just call it on other pages
// router.js
export default {
routes: [
{
path: 'address_list',
component: () => import( 'Page.vue'),
meta: { component: 'AddressList' },
},
],
}
<!--Page.vue-->
<template>
<component :is="component" />
</template>
<script lang="ts">
import AddressList from '/@/views/AddressList.vue'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Page',
components: { AddressList },
computed: {
component () {
return this.$route.meta.component
},
},
})
</script>
Related articles
- A great one Vue3 Study list
- Let you 30 Minute quick grasp vue 3
- Start with an article Vue3 In the new API
Last
Official account : Front end development blog , reply 1024, Get the front-end advanced information