export default {     methods: {         getParamsId() {             return this.$route.params.id         }     } }

const router = new VueRouter({     routes: [{         path: '/user/:id',         component: User,         props: true     }] })

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         })     }] })

                           
{{item.title}}
             
{{item.content}}
         

父組件使用：

import List from '@/components/List.vue' export default {     components: {         List     },     data() {         return {             list: [{                 title: 'title',                 content: 'content'             }],             currentItem: ''         }     } }

文檔：cn.vuejs.org/v2/guide/re…

樣式穿透

在開發(fā)中修改第三方組件樣式是很常見，但由于 scoped 屬性的樣式隔離，可能需要去除 scoped 或是另起一個 style  。這些做法都會帶來副作用(組件樣式污染、不夠優(yōu)雅)，樣式穿透在css預(yù)處理器中使用才生效。

我們可以使用 >>> 或 /deep/ 解決這一問題：

 外層 >>> .el-checkbox {   display: block;   font-size: 26px;    .el-checkbox__label {     font-size: 16px;   } } 

 /deep/ .el-checkbox {   display: block;   font-size: 26px;    .el-checkbox__label {     font-size: 16px;   } } 

watch高階使用

1. 立即執(zhí)行

watch 是在監(jiān)聽屬性改變時才會觸發(fā)，有些時候，我們希望在組件創(chuàng)建后 watch 能夠立即執(zhí)行。

可能想到的的方法就是在 create 生命周期中調(diào)用一次，但這樣的寫法不優(yōu)雅，或許我們可以使用這樣的方法：

export default {     data() {         return {             name: 'Joe'         }     },     watch: {         name: {             handler: 'sayName',             immediate: true         }     },     methods: {         sayName() {             console.log(this.name)         }     } }

深度監(jiān)聽在監(jiān)聽對象時，對象內(nèi)部的屬性被改變時無法觸發(fā) watch ，我們可以為其設(shè)置深度監(jiān)聽：

export default {     data: {         studen: {             name: 'Joe',             skill: {                 run: {                     speed: 'fast'                 }             }         }     },     watch: {         studen: {             handler: 'sayName',             deep: true         }     },     methods: {         sayName() {             console.log(this.studen)         }     } }

2. 觸發(fā)監(jiān)聽

執(zhí)行多個方法使用數(shù)組可以設(shè)置多項(xiàng)，形式包括字符串、函數(shù)、對象：

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)         }     } }

文檔：cn.vuejs.org/v2/api/#wat…

watch監(jiān)聽多個變量

watch本身無法監(jiān)聽多個變量。但我們可以將需要監(jiān)聽的多個變量通過計算屬性返回對象，再監(jiān)聽這個對象來實(shí)現(xiàn)“監(jiān)聽多個變量”

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         }     } }

事件參數(shù)$event

$event 是事件對象的特殊變量，在一些場景能給我們實(shí)現(xiàn)復(fù)雜功能提供更多可用的參數(shù)

1. 原生事件

在原生事件中表現(xiàn)和默認(rèn)的事件對象相同：

export default {     methods: {         inputHandler(msg, e) {             console.log(e.target.value)         }     } }

2. 自定義事件

在自定義事件中表現(xiàn)為捕獲從子組件拋出的值

my-item.vue：

export default {     methods: {         customEvent() {             this.$emit('custom-event', 'some value')         }     } } 復(fù)制代碼

App.vue：

export default {     methods: {         customEvent(index, e) {             console.log(e) // 'some value'         }     } }

文檔：

• cn.vuejs.org/v2/guide/ev…

• cn.vuejs.org/v2/guide/co…

自定義組件雙向綁定

組件 model 選項(xiàng)：

input 默認(rèn)作為雙向綁定的更新事件，通過 $emit 可以更新綁定的值

export default {     props: {         value: {             type: Boolean,             default: false         }     },     methods: {         switchChange(val) {             this.$emit('input', val)         }     } }

修改組件的 model 選項(xiàng)，自定義綁定的變量和事件

export default {     model: {         prop: 'num',         event: 'update'     },     props: {         value: {             type: String,             default: ''         },         num: {             type: Number,             default: 0         }     },     methods: {         numChange() {             this.$emit('update', this.num++)         }     } }

文檔：cn.vuejs.org/v2/api/#mod…

監(jiān)聽組件生命周期

通常我們監(jiān)聽組件生命周期會使用 $emit ，父組件接收事件來進(jìn)行通知

子組件：

export default {     mounted() {         this.$emit('listenMounted')     } }

父組件：

其實(shí)還有一種簡潔的方法，使用 @hook 即可監(jiān)聽組件生命周期，組件內(nèi)無需做任何改變。同樣的， created 、 updated  等也可以使用此方法。

程序化的事件偵聽器

比如，在頁面掛載時定義計時器，需要在頁面銷毀時清除定時器。這看起來沒什么問題。但仔細(xì)一看 this.timer 唯一的作用只是為了能夠在  beforeDestroy 內(nèi)取到計時器序號，除此之外沒有任何用處。

export default {     mounted() {         this.timer = setInterval(() => {             console.log(Date.now())         }, 1000)     },     beforeDestroy() {         clearInterval(this.timer)     } }

如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。

我們可以通過 $on 或 $once 監(jiān)聽頁面生命周期銷毀來解決這個問題：

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)         })     } }

使用這個方法后，即使我們同時創(chuàng)建多個計時器，也不影響效果。因?yàn)樗鼈儠陧撁驿N毀后程序化的自主清除。

文檔：cn.vuejs.org/v2/guide/co…

手動掛載組件

在一些需求中，手動掛載組件能夠讓我們實(shí)現(xiàn)起來更加優(yōu)雅。比如一個彈窗組件，最理想的用法是通過命令式調(diào)用，就像 elementUI 的  this.$message 。而不是在模板中通過狀態(tài)切換，這種實(shí)現(xiàn)真的很糟糕。

先來個最簡單的例子：

import Vue from 'vue' import Message from './Message.vue'  // 構(gòu)造子類 let MessageConstructor = Vue.extend(Message) // 實(shí)例化組件 let messageInstance = new MessageConstructor() // $mount可以傳入選擇器字符串，表示掛載到該選擇器 // 如果不傳入選擇器，將渲染為文檔之外的的元素，你可以想象成 document.createElement()在內(nèi)存中生成dom messageInstance.$mount() // messageInstance.$el獲取的是dom元素 document.body.appendChild(messageInstance.$el)

下面實(shí)現(xiàn)一個簡易的 message 彈窗組件

Message/index.vue：

// 默認(rèn)選項(xiàng) const DefaultOptions = {     duration: 1500,     type: 'info',     content: '這是一條提示信息！', } let mid = 0 export default {     data() {         return {             notices: []         }     },     methods: {         add(notice = {}) {             // name標(biāo)識 用于移除彈窗             let _name = this.getName()             // 合并選項(xiàng)             notice = Object.assign({                 _name             }, DefaultOptions, notice)              this.notices.push(notice)              setTimeout(() => {                 this.removeNotice(_name)             }, notice.duration)         },         getName() {             return 'msg_' + (mid++)         },         removeNotice(_name) {             let index = this.notices.findIndex(item => item._name === _name)             this.notices.splice(index, 1)         }     } }

.wrap {     position: fixed;     top: 50px;     left: 50%;     display: flex;     flex-direction: column;     align-items: center;     transform: translateX(-50%); }  .message {     --borderWidth: 3px;     min-width: 240px;     max-width: 500px;     margin-bottom: 10px;     border-radius: 3px;     box-shadow: 0 0 8px #ddd;     overflow: hidden; }  .content {     padding: 8px;     line-height: 1.3; }  .message.info {     border-left: var(--borderWidth) solid #909399;     background: #F4F4F5; }  .message.success {     border-left: var(--borderWidth) solid #67C23A;     background: #F0F9EB; }  .message.error {     border-left: var(--borderWidth) solid #F56C6C;     background: #FEF0F0; }  .message.warning {     border-left: var(--borderWidth) solid #E6A23C;     background: #FDF6EC; }

Message/index.js：

import Vue from 'vue' import Index from './index.vue'  let messageInstance = null let MessageConstructor = Vue.extend(Index)  let init = () => {     messageInstance = new MessageConstructor()     messageInstance.$mount()     document.body.appendChild(messageInstance.$el) }  let caller = (options) => {     if (!messageInstance) {         init(options)     }     messageInstance.add(options) }  export default {     // 返回 install 函數(shù) 用于 Vue.use 注冊     install(vue) {         vue.prototype.$message = caller     } }

main.js：

import Message from '@/components/Message/index.js'  Vue.use(Message)

使用：

this.$message({     type: 'success',     content: '成功信息提示',     duration: 3000 })

文檔：cn.vuejs.org/v2/api/#vm-…

看完上述內(nèi)容，你們掌握Vue開發(fā)技巧有哪些的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！