diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md index f2834df..946d20b 100644 --- a/00-前端工具/03-VS Code.md +++ b/00-前端工具/03-VS Code.md @@ -2,6 +2,17 @@ ## 常见操作 +### 自动保存 + +``` + "files.autoSave": "onFocusChange" +``` + +参考链接： + + + + ### 如何查看代码结构 - 方法一：「Cmd + Shift + O」 diff --git a/21-Vue基础/04-Vue组件.md b/21-Vue基础/04-Vue组件.md index 8338453..ba533d2 100644 --- a/21-Vue基础/04-Vue组件.md +++ b/21-Vue基础/04-Vue组件.md @@ -1,13 +1,10 @@ - - ## 组件的定义和注册 组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 - ### 写法一 写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。 @@ -74,7 +71,6 @@ ### 写法二 - 写法二：Vue.component方法定义、注册组件（一步到位）。 代码如下： @@ -116,7 +112,6 @@ ![](http://img.smyhvae.com/20180422_2251.png) - 上图中，同样注意两点： 1、红框部分，要保证二者的名字是一致的。 @@ -132,8 +127,7 @@ ![](http://img.smyhvae.com/20180422_2232.png) - -### 写法三【荐】 +### 写法三 写法三：将组件内容定义到template标签中去。 @@ -180,7 +174,6 @@ ``` - 代码截图如下： ![](http://img.smyhvae.com/20180422_2256.png) @@ -206,10 +199,10 @@ - +
+ + +
@@ -251,22 +247,24 @@ ``` - 上方代码所示，我们在`account`组件中添加的data 和 method，其**作用域**只限于`account`组件里，保证独立性。 -注意，在为组件添加数据时，data不再是对象了，而是方法，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。 +注意，在为组件添加数据时，data不再是对象了，而是function，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。通过 function返回对象的形式来定义data，作用是： + +- 上方代码中，组件``被调用了两次（不像根组件那样只能调用一次），但是每个组件里的数据 myData是**各自独立**的，不产生冲突。 + +- 换而言之，通过函数返回对象的目的，是为了让每个子组件都有自己**独立的数据存储**，而不应该共享一套数据。 ## 子组件的定义和注册 - 我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。 -比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个模块可以定义为子组件。 +### 在父组件中定义子组件 +比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个晓得模块就可以定义为子组件。 -需要注意的是，我们在父组件中定义的子组件，只能在当前父组件中使用；在其他的组件，甚至根组件中，都无法使用。 - +需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。 ```html @@ -309,19 +307,471 @@ ``` +我们发现，既然是定义父亲``的子组件，那么，子组件``的调用，只能写在父组件``的`template`模板中。 + 显示效果： -20180423_1029.png +![](http://img.smyhvae.com/20180423_1029.png) -## 组件之间的动态切换 + +### 在 Vue 根实例中定义子组件 + +当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下： + +```html + + + + + + + + Document + + + + + +
+ +
+ + + + + + +``` + +这样写的话，我们定义的子组件``在整个`#app`区域，都是可以使用的。 + +上面的代码，还有**另外一种写法**：（把子组件的模板定义，存放到变量中）【重要】 + +```html + + + + + + + + Document + + + + + +
+ +
+ + + + + +``` + +注意，在定义子组件时，关键字`components`不要写错了。 + +## 组件之间的动态切换（暂略） 我们可以利用` `标签的`:is`参数来进行组件之间的切换。 - - - - - +## 父组件向子组件传递数据 + +我们要记住：父组件通过**属性**的形式，向子组件传递数据。 + +**引入**： + +我们先来看这样一段代码： + +```html + + + + + + + + Document + + + + + +
+ + + +
+ + + + + + + +``` + +上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的： + +![](http://img.smyhvae.com/20180424_1520.png) + +**1、父组件传值给子组件**： + +要通过 props 属性将number进行传递给子组件才可以。代码如下： + +```html + + + + + + + + Document + + + + + +
+ + + +
+ + + + + + +``` + +在``标签中，要注意`:number`里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串： + +![](http://img.smyhvae.com/20180424_1530.png) + +**2、子组件获取了父组件的数据后，进行求和操作**： + +上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。 + +一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据） + +```javascript + var myCounter = { + //这里是子组件的范围 + props: ['number'], //通过 props 属性将父亲的数据传递给子组件 + template: '
我是子组件。{{number}}
', + methods: { + addClick: function () { + this.number ++; //这种写法不推荐。不建议直接操作父组件中的数据 + } + + } + } +``` + +上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错： + +img.png + +这样涉及到**单向数据流**的概念： + +- 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。 + +既然如此，我可以把父组件中的数据，在子组件中创建**副本**，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下： + +```html + + + + + + + + Document + + + + + +
+ + + +
+ + + + + + + +``` + +## 子组件向父组件传值 + +我们要记住：子组件通过**事件触发**的形式，向父组件传值。 + +**案例**：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。 + +步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下： + +```html + + + + + + + + Document + + + + + +
+ + +
+ + + + + +``` + +步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下： + +```html + + + + + + + + Document + + + + + +
+ + + +
+ + + + + + +``` + +上方代码中，通过关键字`emit`通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行`myMethod()`方法（这个方法是在Vue实例中定义的，很好理解） + +步骤（3）：在父组件中求和 + +既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的`myMethod()`里定义求和的方法即可。 + +```html + + + + + + + + Document + + + + + +
+ + + +
{{totalData}}
+
+ + + + + + +``` + +代码的关键： + +- 在``标签中，通过 `ref = "xxx"`属性，给各个组件起一个别名，代表组件的引用 + +- 在父函数`myMethod()`中，通过`this.$refs.xxx`获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性） + +![](http://img.smyhvae.com/20180424_1455.png)