webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
qianguyihao 2018-04-24 23:46:54 +08:00
parent 1839a6a182
commit 8158a719e7
2 changed files with 108 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
09-Node.js/01-Node.js入门.md
View File

@ -400,11 +400,33 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议
![](http://img.smyhvae.com/20180302_1210.png) ![](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。 由于 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： 安装 NRM：
@ -432,6 +454,32 @@ nrm use taobao // 使用淘宝的镜像
推荐的国内加速镜像淘宝：<https://npm.taobao.org/> 推荐的国内加速镜像淘宝：<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 的使用
我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入： 我们可以输入`node`命令，然后在里面写 js 的代码，也可以 通过 node 运行 js 文件。比如，编写好一个 js文件`01.js`，然后在命令行输入：
@ -513,28 +561,6 @@ nvm install 6.0.0
安装好 `Node` 之后，`npm` 也会自动安装的，输入 `npm -v`，查看 npm 的版本。 安装好 `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。
## 我的公众号 ## 我的公众号

61
21-Vue基础/04-Vue组件.md
View File

@ -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。代码如下： 步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下：
@ -716,7 +771,7 @@ img.png
<body> <body>
<div id="app"> <div id="app">
<!-- 在外层监听`change`事件，进而出发外层的 myClick 方法 --> <!-- 在外层监听`change`事件，进而触发外层的 myMethod 方法 -->
<counter ref="one" @change="myMethod"> </counter> <counter ref="one" @change="myMethod"> </counter>
<counter ref="two" @change="myMethod"> </counter> <counter ref="two" @change="myMethod"> </counter>
<div>{{totalData}}</div> <div>{{totalData}}</div>
@ -725,7 +780,7 @@ img.png
<script> <script>
Vue.component('counter', { Vue.component('counter', {
template: '<div @click = "addClick">当前计数：{{number}}</div>', //当组件被点击时， template: '<div @click = "addClick">当前计数：{{number}}</div>', //当组件被点击时，触发 addClick方法
data: function () { data: function () {
return { return {