新增动态组件

Author: OctoberToEscape

Vue-Component/README.md

@@ -4,6 +4,8 @@
 
 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，**封装可重用的代码**。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素，是在前端在单页面应用（SPA）上最好的一种实现方式，把所有**功能模块拆解成单独的组件**，每个组件都有**独立的作用域**，且还**可以相互通信**。
 
+![img1.png](https://i.loli.net/2020/08/17/GvKlogTcXY67C8j.png)
+
 ## 认识单页面应用（SPA）
 
 在传统的页面之间跳转，是通过刷新，重新渲染一个页面而实现，在渲染的过程中势必要加载外部资源文件，页面在服务器中渲染出来是通过一系列的生命周期，在这个过程中会因为网速等硬件问题直接影响页面的加载速度，为解决这一问题，前端在新的设计模式上引入了组件的概念，页面之间的跳转变成了组件之间的切换，不需要重新加载整个页面，也不用考虑页面的生命周期，换成组件的生命周期，在性能上大大的提升了。
@@ -173,3 +175,68 @@ var alone = new Vue({
     <button>0</button>
 </div>
 ```
+
+---
+
+## 特殊的 HTML 标签中需要使用 is
+
+像 `<ul>`、`<ol>`、`<table>`、`<select>` 这样的元素里允许包含的元素有限制，而另一些像 `<option>` 这样的元素只能出现在某些特定元素的内部。
+
+```html
+<div id="special">
+    <select>
+        <!-- 错误写法如下 -->
+
+        <!-- 
+            <privateOption />
+            会被当作无效的东西过滤掉
+         -->
+
+        <!-- 正确写法 -->
+        <option is="privateOption"></option>
+    </select>
+</div>
+```
+
+---
+
+## 动态组件 - :is
+
+某些场景下我们需要动态的切换不同的页面这时候，讲一个个需求封装成一个个组件，用动态组件就可以实现
+
+```html
+<div id="dynamic">
+    <button @click="change">{{title}}</button>
+    <br />
+    <p :is="title"></p>
+</div>
+```
+
+```js
+//点击后根据变量的改变加载不同的组件
+var dynamic = new Vue({
+    el: "#dynamic",
+    data: {
+        title: "red",
+    },
+    methods: {
+        change() {
+            this.title = this.title == "red" ? "green" : "red";
+        },
+    },
+    components: {
+        red: {
+            template: "<h1>Red</h1>",
+        },
+        green: {
+            template: "<h2>Green</h2>",
+        },
+    },
+});
+```
+
+---
+
+## Prop 实现数据通信
+
+在 Vue 中，父子组件的关系可以总结为 `prop` 向下传递，事件向上传递。父组件通过 `prop` 给子组件下发数据，子组件通过`事件`给父组件发送消息。

Vue-Component/index.html

@@ -25,6 +25,23 @@
             <p>{{count}}</p>
             <my-component />
         </div>
+        <br />
+
+        <!-- 特殊的HTML结构中需要使用到is -->
+        <div id="special">
+            <select>
+                <!-- <privateOption /> -->
+                <option is="privateOption"></option>
+            </select>
+        </div>
+        <br />
+
+        <!-- 动态组件 -->
+        <div id="dynamic">
+            <button @click="change">{{title}}</button>
+            <br />
+            <p :is="title"></p>
+        </div>
     </body>
 </html>
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
@@ -101,4 +118,35 @@
             },
         },
     });
+
+    //特殊的HTML需要使用到is
+    var special = new Vue({
+        el: "#special",
+        components: {
+            privateOption: {
+                template: "<option>我是特殊的HTML</option>",
+            },
+        },
+    });
+
+    //动态组件
+    var dynamic = new Vue({
+        el: "#dynamic",
+        data: {
+            title: "red",
+        },
+        methods: {
+            change() {
+                this.title = this.title == "red" ? "green" : "red";
+            },
+        },
+        components: {
+            red: {
+                template: "<h1>Red</h1>",
+            },
+            green: {
+                template: "<h2>Green</h2>",
+            },
+        },
+    });
 </script>