vue使用常見問題

父子組件如何傳遞方法，方法預置一些參數

常見的問題/坑

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

基礎問題 https://juejin.im/post/59fa92...

模板解析

Vue的模板是DOM模板，使用瀏覽器原生的解析器而不是本身實現一個。相比字符串模板，DOM模板有一些好處，可是也有問題，它必須是有效的HTML片斷。一些HTML元素對什麼元素能夠放在它裏面有限制。常見的限制有：

a不能包行其餘的交互元素（如按鈕、連接）

ul和ol只能直接包含li。

select只能包含option和optgroup。

table只能直接包含thead、tbody、ftoot、tr、caption、col、colgroup。

tr只能直接包含th和td。

在實際應用中，這些限制會致使意外的結果。儘管再簡單的狀況下它可能能夠工做，可是咱們不能依賴自定義組件在瀏覽器驗證以前展開結果。==例如<my-select><option>....</option></my-select>不是有效的模板，即便my-select組件最終展開爲<select>...</select>。==

另外一個結果是，自定義標籤（包括自定義元素和特殊標籤，如<component>、<template>、<partial>）不能用在ul、select、table等對內部元素有限制的標籤內。放在這些元素內的自定義標籤將被提到元素的外面，於是渲染不正確。

自定義元素應當使用is特性，如
<table>
    <tr is="my-component"></tr>
</table>
<template>

不能用在<table>內，這時應該使用<tbody>，<table>能夠有多個<tbody>。以下：
<table>
    <tbody v-for="item in items">
        <tr>Even row</tr>
        <tr>Odd row</tr>
    </tbody>
</table>

v-for經常使用tips

當在組件中使用 v-for 時，key 如今是必須的。

<ul>
  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
</ul>

項目路徑配置

其中 assetsSubDirectory 指靜態資源文件夾，也就是打包後的　js、css、圖片等文件所放置的文件夾，這個默認通常不會有問題。

　　assetsPublicPath 指靜態資源的引用路徑，默認配置爲 /，即網站根目錄，與 assetsSubDirectory 組合起來就是完整的靜態資源引用路徑 /static。

build.assetsSubDirectory: 'static'
build.assetsPublicPath: './'

dev.assetsSubDirectory: 'static'
dev.assetsPublicPath: '/'

只要把根目錄改成相對目錄就行了：

使用ESnext class 特性

異步組件

異步路由組件

const AsyncComponent = () => import('./AsyncComponent')

異步組件工廠

Vue.component(
  'async-webpack-example',
  () => import('./my-async-component')
)

相比於異步路由組建，異步組件工廠通常適用於組件內進一步小顆粒度的拆分處理，如：大致量組件內初次加載時的非必要組件（組件內嵌套的彈窗組件或 Popover 組件等）。

數據雙向綁定問題

• 多處共用一份數據，一份地方改了，其餘引用數據的地方都會自動更新
• 某處的初始數據是另外一個地方的數據，它修改隻影響本身，不影響其餘地方。解決方案就是：==某處組件接收prop做爲初始數據，對它深拷貝（全量）（或者按需取字段構成本身的data，只拿部分），做爲本身的data，而後修改時只會修改這份本身的數據，不影響其餘==，

引用圖片

圖片引用問題。直接把本地圖片地址放在src裏沒問題。但若是把地址提取出來寫在data裏或者經過method動態給src賦值則引用不到。

由於放在template模板裏會被webpack打包因此能夠，而放在data或者動態賦值，圖片路徑只是一個字符串webpack不會處理因此引用不到。

解決辦法：經過import或者required引入。import src from ‘../../img.png’或者data:{img:require(‘../../img.png’)}

對象數組深度監聽

後端傳過來的數組是一個數組對象，頁面中綁定對象中某一具體的屬性，當該值變化時調用某個函數，天然想到就是watch方法。但如何==watch數組對象中某一個具體的屬性==，顯然不可能一個個屬性寫watch。
解決辦法：

• 1.==watch整個對象，設置deep爲true==，當該對象發生改變時，調用處理函數。
• 2.==將頁面中綁定的屬性寫在computed函數中，watch這個computed中的函數==，當對象值改變時會進入computed函數中，進而進入watch函數中，再調用處理函數。

動態增長class

有一個正常的class, 有一個v-bind:class

<div class="test" :class="{'hasClass': ifHasClass}"></div>

給元素動態增長class時，能夠在模板中經過:class={‘hasClass’: ifHasClass}來實現，當ifHasClass爲true時，該元素會自動加上hasClass的樣式。

動態綁定的class能夠與正常寫的一塊兒使用，但若是在一個元素中使用了兩個class則會報錯

vue實例，vue單文件組件返回值，watch或生命週期中的箭頭函數中的this

vue實例對象

let vm = new Vue({
    el: '#app',
    render: h => h(App)
})

console.log(vm)

vue單文件組件返回值

import App from './App.vue'

console.log(App)

watch或生命週期中的箭頭函數中的this

watch: {
    //使用了箭頭函數，則this是 {a: {}}, 不是當前vue實例
    text: (val, oldval) => {
        console.log(this)
    }
}

是和vue單文件組件返回值一致的，只是外面又包了個對象，將返回值做爲屬性值使用了。

兄弟組件通訊

在公共的父組件有一個標誌位，組件A經過$emit('event', value)來修改該標誌位，將該標誌位傳給組件B，組件B watch該標誌位，觸發行爲。

小示例

當外部某一組件想觸發keep-alive其中一個非激活狀態的component的方法時，能夠加個標誌位，組件內watch該標誌位, 變化時觸發指定方法。

this.$refs.component 是指的實時的當前激活的組件

<keep-alive>
    <component :is="currentFollowComponent"
               :project-refresh.sync="followProjectRefresh"
    >
    </component>
</keep-alive>