問題1：scoped原理

1.作用：讓樣式在本組件中生效，不影響其他組件

2.原理：給節(jié)點(diǎn)新增自定義屬性，然后css根據(jù)屬性選擇器添加樣式。

問題2：讓css只在當(dāng)前組件生效

<style scoped>

問題3：scss、stylus

scss：

? ? ? ? 1.下載 npm install sass-loader node-sass --save

? ? ? ? 2. <style lang='scss' scoped>? ?（不能修改其他組件的樣式）

? ? ? ? 3.scss 樣式穿透 ：父元素 /deep/ 子元素

? ? ? ? ? ? ?

stylus：

? ? ? ? 1.下載 npm install stylus stylus-loader --save

? ? ? ? 2.?<style lang='stylus' scoped>

? ? ? ? 3.stylus樣式穿透：①父元素 /deep/ 子元素? ② 父元素 >>> 子元素

問題4：vue組件之間如何傳值通信

1.父組件 傳值 子組件

? ? ? ? 父組件：<Son :messg='msg'> </Son>?

????????????????（這里msg是父組件中定義的數(shù)據(jù)，messg是子組件接受的）

? ? ? ? 子組件：props:['messg']? or? props:{ messg:數(shù)據(jù)類型 }

2.子組件 傳值 父組件

? ? ? ? 子組件：

? ? ? ? ? ? ? ? this.$emit("自定義事件名稱",要傳的數(shù)據(jù))? ?自定義事件名稱=getVal

? ? ? ? 父組件：

? ? ? ? ? ? ? ? <Son @childInput='getVal'></Son>? （@之后的事件是需要父組件定義的）

? ? ? ? ? ? ? ? methods:{

? ? ? ? ? ? ? ? ? ? ? ? childInput(msg){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // msg就是子組件傳遞過來的數(shù)據(jù)

????????????????????????}

????????????????}

3.兄弟組件之間的傳值

? ? ? ? 通過一個(gè)中轉(zhuǎn)（bus）：

? ? ? ? ? ? ? ? import Vue from 'vue'

? ? ? ? ? ? ? ? export default new Vue;

? ? ? ? A兄弟傳值：?

? ? ? ? ? ? ? ? import bus from '@/common/bus'

? ? ? ? ? ? ? ? bus.$emit('toFooter',this.msg)

? ? ? ? B兄弟接受：

????????????????import bus from '@/common/bus'

? ? ? ? ? ? ? ? bus.$on('toFooter',(data) => {

? ? ? ? ? ? ? ? ? ? ? ? //data就是this.msg數(shù)據(jù)

????????????????})

問題5：computed、methods、watch有什么區(qū)別？

1.computed vs methods 區(qū)別

? ? ? ? computed是有緩存的

? ? ? ? methods是沒有緩存的

2.computed vs watch 區(qū)別

? ? ? ? watch是監(jiān)聽，數(shù)據(jù)或者路由發(fā)生改變了，才可以響應(yīng)（執(zhí)行）

? ? ? ? computed計(jì)算某一個(gè)屬性的變化，如果某個(gè)值改變了，計(jì)算屬性會監(jiān)聽到進(jìn)行返回

? ? ? ? watch是當(dāng)前監(jiān)聽的數(shù)據(jù)改變了，才會執(zhí)行內(nèi)部代碼

問題6：props和data優(yōu)先級誰高？

優(yōu)先級由源碼決定：

? ? ? ? props ===>? methods? ===>? data? ===>? computed? ===> watch