環(huán)境：vue-cli+webstorm
目錄
1. 父組件向子組件傳值
2. 子組件向父組件傳值
3. 父組件向子組件傳動態(tài)props
4. 學(xué)習(xí)過程中遇到的小問題
1. 父組件向子組件傳值
?? 父組件：在調(diào)用組件的時候凛篙，使用 v-bind 將 show1 的值綁定為父組件中定義的變量 show
<template>
<div id="head">
<Login :show1="show"/>
</div>
</template>
<script>
import Login from '../view/login.vue'
export default {
name: 'header',
data () {
return {
show: false,
}
},
components: {
Login
}
}
</script>
?? 子組件：子組件利用props接收父組件中傳來的值，在 props 中添加了元素之后梗掰，就不需要在 data 中再添加變量了
<template>
<div id="login">
</div>
</template>
<script>
export default {
name: 'login',
props: ['show1'],
data () {
return {}
},
}
</script>
2. 子組件向父組件傳值
?? 子組件：首先聲明一個了方法 submit于微，用 click 事件來調(diào)用 submit .在 submit 中斟薇，使用了 $emit 來遍歷 transferUser 事件句喜，并返回 this.username,this.password。
?? 其中 transferUser 是一個自定義的事件崭捍，功能類似于一個中轉(zhuǎn)荤牍，this.username,this.password 將通過這個事件傳遞給父組件
<template>
<div id="login">
<form>
<table>
<tbody>
<tr>
<td>用戶名:</td>
<td><input v-model="username" type="text" placeholder="請輸入用戶名"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input v-model="password" type="password" placeholder="請輸入密碼"/></td>
</tr>
<tr>
<td><input type="submit" @click="submit"/></td>
</tr>
</tbody>
</table>
</form>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
username: '',
password: ''
}
},
methods: {
submit () {
this.$emit('transferUser', this.username, this.password)
},
}
}
</script>
?? 父組件：在父組件中禀倔，聲明了一個方法 getUser，用 transferUser 事件調(diào)用 getUser 方法参淫，獲取到從子組件傳遞過來的參數(shù) username,password.
getUser 方法中的參數(shù)就是從子組件傳遞過來的參數(shù) 救湖。
<template>
<div id="head">
<Login @transferUser="getUser"/>
</div>
</template>
<script>
import Login from '../view/login.vue'
export default {
name: 'header',
data () {
return {
username: '',
password: '',
}
},
methods: {
getUser (username, password) {
this.username = username
this.password = password
}
},
components: {
Login
}
}
</script>
3. 父組件向子組件傳動態(tài)props
?? 我們經(jīng)常遇到父組件會不時給子組件傳遞數(shù)據(jù)的需求，但是數(shù)據(jù)是異步加載的涎才，所以為了數(shù)據(jù)及時更新鞋既，我們可以用watch來監(jiān)聽父組件改變的prop。
<script>
export default {
name: 'login',
props: ['show'],
data () {
return {
username: '',
password: ''
}
},
watch: {
show: 'change'
},
methods: {
change () {}
}
}
</script>
?? 在watch中耍铜，當(dāng)show的值發(fā)生改變時邑闺，就會執(zhí)行 change 方法。
4. 學(xué)習(xí)過程中遇到的小問題
?? 在學(xué)習(xí)過程隨時都會遇到各種奇奇怪怪的問題棕兼，只能邊學(xué)邊記錄了陡舅。
?? 今天一打開項目就遇到了關(guān)于CSS文件引入的問題，報錯如下：
Module build failed: Unknown word(5:1)
?? 在之前的學(xué)習(xí)中伴挚，我們安裝了style-loader和css-loader,然后在webstorm.base.conf.js文件中加入的module:{rules[]}中加入對css尾綴的識別代碼(鏈?zhǔn)窖b載機配置代碼)：
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
?? 在早期的文檔中l(wèi)oader：中并沒有-loader尾綴靶衍，在2.0中必須加入此尾綴.
然后，報錯了茎芋，錯誤就是之前所提到的unknown word.經(jīng)過在網(wǎng)上的不斷查找颅眶，得出兩個解決方案：
?? 一、 其實css-loader和style-loader在配置文件中的書寫順序是有要求的田弥，css-loader會遍歷所有的css文件涛酗，找到所有的url（...）并進(jìn)行處理，style-loader則是把所有的樣式插入到頁面的style標(biāo)簽里面，因此商叹，這個順序是先加載css-loader再加載style-loader燕刻，但是在webpack.config.js文件里面，loader的解析是逆序的剖笙，即解析順序是從下到上卵洗，從右到左，因此要把style-loader寫在css-loader的前面枯途。（然而忌怎，這個方法并沒有解決我的問題）
?? 二籍滴、 不配置這項信息酪夷，沒錯，就是備注掉整個css配置項孽惰，如下：
/*{
test:/\.css$/,
loader:'style-loader!css-loader',
},*/
?? 嗯晚岭，很開心，運行成功了勋功，但是為什么要這樣做坦报，我并不知道原因。狂鞋。片择。
2018.3.21更新：
?? 關(guān)于unknown word問題，在這個項目中由于我使用的是vue-cil構(gòu)建的項目骚揍，所以對于一部分自動生成的文件并不是這么了解字管。在我之后去學(xué)習(xí)這些文件的過程中我發(fā)現(xiàn)，開發(fā)環(huán)境下的webpack配置信不，webpack.base.conf.js通過merge方法合并webpack.dev.conf.js嘲叔，webpack.prod.conf.js基礎(chǔ)配置，而webpack.dev.conf.js里面有一個vue-cli自己定義的加載器抽活，專門處理css樣式硫戈，如果想用自己的加載器就不能用他自動生成styleLoaders，同樣的在webpack.prod.conf.js里面也一樣有默認(rèn)的styleLoaders下硕。
?? webpack.base.conf.js：配置vue開發(fā)環(huán)境的webpack配置丁逝，處理各種文件（.js/.html等等）vue-cli腳手架之webpack.base.conf.js
??webpack.dev.conf.js：開發(fā)環(huán)境模式配置文件 vue-cli腳手架之webpack.dev.conf.js
webpack.prod.conf.js:生產(chǎn)環(huán)境配置文件 vue-cli腳手架之webpack.prod.conf.js
參考文章：
Vue 爬坑之路（二）—— 組件之間的數(shù)據(jù)傳遞
webpack import css文件的環(huán)境配置遇到的Module build failed: Unknown word 及其他
