前端-vue框架学习笔记(二)-传值

环境：vue-cli+webstorm

目录

1. 父组件向子组件传值

2. 子组件向父组件传值

3. 父组件向子组件传动态props

4. 学习过程中遇到的小问题

---

1. 父组件向子组件传值

   父组件：在调用组件的时候，使用 v-bind 将 show1 的值绑定为父组件中定义的变量 show

   子组件：子组件利用props接收父组件中传来的值，在 props 中添加了元素之后，就不需要在 data 中再添加变量了

2. 子组件向父组件传值

   子组件：首先声明一个了方法 submit，用 click 事件来调用 submit .在 submit 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username,this.password。
   其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username,this.password 将通过这个事件传递给父组件

   父组件：在父组件中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username,password.
getUser 方法中的参数就是从子组件传递过来的参数 。

3. 父组件向子组件传动态props

   我们经常遇到父组件会不时给子组件传递数据的需求，但是数据是异步加载的，所以为了数据及时更新，我们可以用watch来监听父组件改变的prop。

   在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 及其他