提示：以下是本篇文章正文内容，下面案例可供参考
1. Разделение параметров маршрутизации
Обычно с параметрами маршрута в компонентах большинство людей делают следующее.
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
Использование $route в компоненте приводит к сильной связи с соответствующим маршрутом, ограничивая гибкость компонента, ограничивая его определенными URL-адресами. Правильный способ — отделить через реквизит.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: true
}]
})
После установки атрибута props маршрута в true компонент может получать параметры params через props.
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}
Вы также можете вернуть свойства через шаблон функции.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
2. Функциональные компоненты Функциональный компонент не имеет состояния, он не может быть создан и не имеет жизненного цикла или методов. Создать функциональный компонент также просто, достаточно добавить объявление функции в шаблон. Как правило, он подходит для компонентов, которые зависят только от изменений внешних данных, и повышает производительность рендеринга благодаря своему легкому весу. Все, что нужно компоненту, передается через параметр контекста. Это объект контекста, см. документацию для конкретных свойств. Здесь реквизит — это объект, содержащий все связанные свойства.
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{
{
item.title}}</p >
<p>{
{
item.content}}</p >
</div>
</div>
</template>
Родительский компонент использует
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>
import List from @/components/List.vue
export default {
components: {
List
},
data() {
return {
list: [{
title: title ,
content: content
}],
currentItem:
}
}
}
3. Область действия стиля Очень часто модифицируют стиль сторонних компонентов в процессе разработки, но из-за изоляции стиля атрибута области действия может потребоваться удалить область действия или создать новый стиль. Эти методы имеют побочные эффекты (загрязнение стиля компонента, отсутствие элегантности) и используют проникновение стиля в препроцессор css для достижения эффекта. Мы можем использовать >>> или /deep/ для решения этой проблемы:
<style scoped>
Outer layer >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
4. Расширенное использование watch Watch запускается при изменении свойства слушателя, и иногда мы хотим, чтобы watch выполнялся сразу после создания компонента. На ум может прийти способ вызвать его один раз за всю жизнь творения, но это не слишком элегантный способ записи, так что, возможно, мы можем использовать что-то вроде этого.
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
Когда Deep Listening прослушивает объект, при изменении внутренних свойств объекта часы не сработают, поэтому мы можем настроить для него Deep Listening.
export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
Запуск слушателя для выполнения нескольких методов Используя массивы, вы можете установить несколько форм, включая строки, функции и объекты.
export default {
data: {
name: Joe
},
watch: {
name: [
sayName1 ,
function(newVal, oldVal) {
this.sayName2()
},
{
handler: sayName3 ,
immaediate: true
}
]
},
methods: {
sayName1() {
console.log( sayName1==> , this.name)
},
sayName2() {
console.log( sayName2==> , this.name)
},
sayName3() {
console.log( sayName3==> , this.name)
}
}
}
5. часы отслеживают несколько переменных сами по себе часы не могут отслеживать несколько переменных. Однако мы можем «прослушивать несколько переменных», возвращая объект с вычисляемым свойством, а затем прослушивая этот объект.
export default {
data() {
return {
msg1: apple ,
msg2: banana
}
},
compouted: {
msgObj() {
const {
msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
if (newVal.msg1 != oldVal.msg1) {
console.log( msg1 is change )
}
if (newVal.msg2 != oldVal.msg2) {
console.log( msg2 is change )
}
},
deep: true
}
}
}
6. Событие события параметра событиясобытие событие — это специальная переменная объекта события, которая предоставляет нам больше доступных параметров для реализации сложных функций в некоторых сценариях . Собственные события: ведет себя так же, как объект события по умолчанию в Собственные события.
<template>
<div>
<input type="text" @input="inputHandler( hello , $event)" />
</div>
</template>
export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}
自定义事件：在自定义事件中表示为捕获从子组件抛出的值。
export default {
methods: {
customEvent() {
this.$emit( custom-event , some value )
}
}
}
<template>
<div>
<my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
</my-list>
</div>
</template>
export default {
methods: {
customEvent(index, e) {
console.log(e) // some value
}
}
}
7. Программный прослушиватель событий. Например, определите таймер, когда страница монтируется, и вам нужно сбросить таймер, когда страница будет уничтожена. Это не кажется проблемой. Но смотрите внимательно, единственная цель this.timer — получить номер таймера в beforeDestroy, иначе он бесполезен.
export default {
mounted() {
this.timer = setInterval(() => {
console.log(Date.now())
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
По возможности лучше обращаться только к хукам жизненного цикла. Это не серьезная проблема, но ее можно считать путаницей. Мы можем решить эту проблему, используя или один раз для прослушивания уничтожения жизненного цикла страницы:
export default {
mounted() {
this.creatInterval( hello )
this.creatInterval( world )
},
creatInterval(msg) {
let timer = setInterval(() => {
console.log(msg)
}, 1000)
this.$once( hook:beforeDestroy , function() {
clearInterval(timer)
})
}
}
Используя этот метод, даже если мы создадим несколько таймеров одновременно, эффект не пострадает. Это связано с тем, что они будут автоматически очищаться программно после уничтожения страницы.
8. Мониторинг жизненного цикла компонента Обычно мы используем $emit для мониторинга жизненного цикла компонента, а родительский компонент получает события для уведомления .
Подсборка
export default {
mounted() {
this.$emit( listenMounted )
}
}
родительский компонент
<template>
<div>
<List @listenMounted="listenMounted" />
</div>
</template>
На самом деле есть простой способ использовать @hook для мониторинга жизненного цикла компонента без внесения каких-либо изменений внутри компонента. Аналогично, создание, обновление и т. д. также могут использовать этот метод.
<template>
<List @hook:mounted="listenMounted" />
</template>