环境：vue-cli+webstorm
目录
1. 父组件向子组件传值
2. 子组件向父组件传值
3. 父组件向子组件传动态props
4. 学习过程中遇到的小问题
1. 父组件向子组件传值
父组件：在调用组件的时候，使用 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 事件来调用 submit .在 submit 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username,this.password。
其中 transferUser 是一个自定义的事件，功能类似于一个中转，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 事件调用 getUser 方法，获取到从子组件传递过来的参数 username,password.
getUser 方法中的参数就是从子组件传递过来的参数 。
<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. 父组件向子组件传动态props
我们经常遇到父组件会不时给子组件传递数据的需求，但是数据是异步加载的，所以为了数据及时更新，我们可以用watch来监听父组件改变的prop。
<script>
export default {
name: 'login',
props: ['show'],
data () {
return {
username: '',
password: ''
}
},
watch: {
show: 'change'
},
methods: {
change () {}
}
}
</script>
在watch中，当show的值发生改变时，就会执行 change 方法。
4. 学习过程中遇到的小问题
在学习过程随时都会遇到各种奇奇怪怪的问题，只能边学边记录了。
今天一打开项目就遇到了关于CSS文件引入的问题，报错如下：
Module build failed: Unknown word(5:1)
在之前的学习中，我们安装了style-loader和css-loader,然后在webstorm.base.conf.js文件中加入的module:{rules[]}中加入对css尾缀的识别代码(链式装载机配置代码)：
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
在早期的文档中loader：中并没有-loader尾缀，在2.0中必须加入此尾缀.
然后，报错了，错误就是之前所提到的unknown word.经过在网上的不断查找，得出两个解决方案：
一、 其实css-loader和style-loader在配置文件中的书写顺序是有要求的，css-loader会遍历所有的css文件，找到所有的url（...）并进行处理，style-loader则是把所有的样式插入到页面的style标签里面，因此，这个顺序是先加载css-loader再加载style-loader，但是在webpack.config.js文件里面，loader的解析是逆序的，即解析顺序是从下到上，从右到左，因此要把style-loader写在css-loader的前面。（然而，这个方法并没有解决我的问题）
二、 不配置这项信息，没错，就是备注掉整个css配置项，如下：
/*{
test:/\.css$/,
loader:'style-loader!css-loader',
},*/
嗯，很开心，运行成功了，但是为什么要这样做，我并不知道原因。。。
2018.3.21更新：
关于unknown word问题，在这个项目中由于我使用的是vue-cil构建的项目，所以对于一部分自动生成的文件并不是这么了解。在我之后去学习这些文件的过程中我发现，开发环境下的webpack配置，webpack.base.conf.js通过merge方法合并webpack.dev.conf.js，webpack.prod.conf.js基础配置，而webpack.dev.conf.js里面有一个vue-cli自己定义的加载器，专门处理css样式，如果想用自己的加载器就不能用他自动生成styleLoaders，同样的在webpack.prod.conf.js里面也一样有默认的styleLoaders。
webpack.base.conf.js：配置vue开发环境的webpack配置，处理各种文件（.js/.html等等）vue-cli脚手架之webpack.base.conf.js
webpack.dev.conf.js：开发环境模式配置文件 vue-cli脚手架之webpack.dev.conf.js
webpack.prod.conf.js:生产环境配置文件 vue-cli脚手架之webpack.prod.conf.js
参考文章：
Vue 爬坑之路（二）—— 组件之间的数据传递
webpack import css文件的环境配置遇到的Module build failed: Unknown word 及其他
网友评论