add：Vue相关：子组件给父组件传递数据

2018-04-24 23:46:54 +08:00 · 2018-04-24 23:46:54 +08:00 · 8158a719e7
commit 8158a719e7
parent 1839a6a182
2 changed files with 108 additions and 27 deletions
--- a/09-Node.js/01-Node.js入门.md
+++ b/09-Node.js/01-Node.js入门.md
@ -400,11 +400,33 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议

 ![](http://img.smyhvae.com/20180302_1210.png)

-### NRM的安装（windows环境）
+
+### NPM的常用命令
+
+- npm init --yes
+
+项目的初始化。执行完成后，会生成`package.json`文件。
+
+- npm install [package]
+
+只在当前工程下安装 package。
+
+- npm install -g [package]
+
+在全局环境下安装 package。
+
+- npm run [script]
+
+
+## NRM的安装

 由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。

-**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。项目地址：<https://www.npmjs.com/package/nrm>
+**NRM**：Node Registry Manager。作用是：**切换和管理包的镜像源**。
+
+- 项目地址：<https://www.npmjs.com/package/nrm>
+
+- GitHub地址： <https://github.com/Pana/nrm>

 安装 NRM：

@ -432,6 +454,32 @@ nrm use taobao  // 使用淘宝的镜像
 推荐的国内加速镜像淘宝：<https://npm.taobao.org/>


+## 安装cnpm
+
+- 项目地址：<https://npm.taobao.org/>
+
+安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
+
+```bash
+npm install -g cnpm --registry=https://registry.npm.taobao.org
+```
+
+
+20180302_2204.png
+
+
+
+如果我们需要通过 cnpm 去安装一个包时，举例如下：
+
+```
+	cnpm i vue
+```
+
+
+解释： i  指的就是 install。
+
+
+
 ## Node 的使用

 我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
@ -513,28 +561,6 @@ nvm install 6.0.0
 安装好 `Node` 之后，`npm` 也会自动安装的，输入 `npm -v`，查看 npm 的版本。


-### 安装cnpm
-
-安装`cnpm`替换npm（npm由于源服务器在国外，下载node包速度较慢，cnpm使用国内镜像）：
-
-```bash
-npm install -g cnpm --registry=https://registry.npm.taobao.org
-```
-
-
-20180302_2204.png
-
-
-
-如果我们需要通过 cnpm 去安装一个包时，举例如下：
-
-```
-	cnpm i vue
-```
-
-
-解释： i  指的就是 install。
-

 ## 我的公众号

--- a/21-Vue基础/04-Vue组件.md
+++ b/21-Vue基础/04-Vue组件.md
@ -591,7 +591,62 @@ img.png

 我们要记住：子组件通过**事件触发**的形式，向父组件传值。

-**案例**：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。
+
+
+
+**案例1:**子组件给父组件传递数据
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <!-- 在外层监听`mysend`事件，进而出发外层的 getData 方法 -->
+        <counter v-on:mysend="getData"> </counter>
+    </div>
+
+    <script>
+
+        Vue.component('counter', {
+            template: '<div @click = "addClick">发送数据给父组件</div>',  //当组件被点击时，触发 addClick 方法
+
+            methods: {
+                addClick: function () {
+                    //第一个参数为键(注意，要小写，不能大写)，第二个参数为值
+                    this.$emit('mysend', 'smyhvae'); //通过键`mysend`事件通知外面，将值`smyhvae`传给父组件
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app',
+            methods: {
+                getData: function (input) { //通过括号里的参数，获取子组件传递过来的值
+                    console.log(input);   //打印结果：smyhvae
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+
+**案例2**：获取子组件的DOM对象
+
+题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。

 步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下：

@ -716,7 +771,7 @@ img.png
 <body>

    <div id="app">
-        <!-- 在外层监听`change`事件，进而出发外层的 myClick 方法 -->
+        <!-- 在外层监听`change`事件，进而触发外层的 myMethod 方法 -->
        <counter ref="one" @change="myMethod"> </counter>
        <counter ref="two" @change="myMethod"> </counter>
        <div>{{totalData}}</div>
@ -725,7 +780,7 @@ img.png
    <script>

        Vue.component('counter', {
-            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，
+            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，触发 addClick方法

            data: function () {
                return {