From b1590f816547cd0751a82af860f28dd38c07dc68 Mon Sep 17 00:00:00 2001 From: zhaoshuangshi Date: Sun, 12 Feb 2023 11:46:33 +0800 Subject: [PATCH] =?UTF-8?q?2-1=E6=89=80=E6=9C=89=E5=B0=8F=E8=8A=82?= =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.md" | 110 +------- .../exercises.md" | 257 +----------------- .../exercises.md" | 121 +-------- .../exercises.md" | 40 +-- .../exercises.md" | 83 +----- 5 files changed, 18 insertions(+), 593 deletions(-) diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md" index 1923329..47ca3ff 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/1.\345\205\250\345\261\200\344\270\216\345\261\200\351\203\250\347\273\204\344\273\266/exercises.md" @@ -1,106 +1,5 @@ # 全局与局部组件 - 
小常识：
-
- -**定义组件名的方式有两种：**
-使用 kebab-case - -```javascript -Vue.component('my-component-name', { /* ... */ }) -``` - -当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 ``。 - -使用 PascalCase - -```javascript -Vue.component('MyComponentName', { /* ... */ }) -``` - -当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 `` 和 `` 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。 - -**全局组件**
-到目前为止，我们只用过 Vue.component 来创建组件： - -```javascript -Vue.component('my-component-name', { - // ... 选项 ... -}) -``` - -这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如： - -```javascript -Vue.component('component-a', { /* ... */ }) -Vue.component('component-b', { /* ... */ }) -Vue.component('component-c', { /* ... */ }) -``` - -```javascript -new Vue({ el: '#app' }) -
- - - -
-``` - -在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。 - - -**局部注册**
-全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 - -在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： - -```javascript -var ComponentA = { /* ... */ } -var ComponentB = { /* ... */ } -var ComponentC = { /* ... */ } -``` - -然后在 components 选项中定义你想要使用的组件： - -```javascript -new Vue({ - el: '#app', - components: { - 'component-a': ComponentA, - 'component-b': ComponentB - } -}) -``` - -对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。 - -注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写： - -```javascript -var ComponentA = { /* ... */ } - -var ComponentB = { - components: { - 'component-a': ComponentA - }, - // ... -} -``` - -或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像： - -```javascript -import ComponentA from './ComponentA.vue' - -export default { - components: { - ComponentA - }, - // ... -} -``` - -**组件注册错误小案例**
```javascript @@ -145,18 +44,15 @@ export default { ``` -**运行会报错**
+**运行会报错**


![在这里插入图片描述](https://img-blog.csdnimg.cn/113a151dfcbb496f9378f29f5621b98f.png)

- 
小测试：
- - -观察上方组件注册错误案例，导致报错的原因是？

+观察上面代码，导致报错的原因是？

## 答案 @@ -166,7 +62,7 @@ export default { ### A -不能使用``应该改成`` +不能使用``应该改成`` ### B diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" index 8bbd0d8..ee9ea5e 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" @@ -1,269 +1,22 @@ # 父子组件通讯 - 
小常识：
-
-**父传子**
- -- 在子组件中定义props属性 值为数组类似于data 但data中的数据来自本身 而props中的数据来自父组件 -- 子组件使用模板中使用props中的属性和data中的用法相同 -- 父组件通过props传值给子组件 -
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312014626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-输出结果为： -
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403120217164.png) -
-说明： -1. 创建Vue实例 data中的数据msg为一个数组 -2. 创建组件 在整个项目中 2组件相对就是1的子组件 -3. 通过3方式前者msg为props值中的数据 后者msg为newVue中data中的数据 -4. 最后正是props中的属性也有data中的使用方法 将数据进行遍历在页面中 - -注意：props负责获取父组件的传递过来的，props中的值是只读的，不允许修改 - -**子传父**
- -- 父组件使用子组件时 在其中定义一个自定义事件 并且绑定父组件中的一个自定义函数 当事件被调用时执行自定义函数 -- 子组件通过this$emit执行自定义事件 -
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403121933688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-最终输出结果为3 -1. 在子组件中定义一个点击事件 触发时执行子组件中的dian函数 并且将参数传入函数中 -2. 在上面的函数中通过this.$emit（‘事件名称’，参数）调用3中的a自定义事件并且将参数传过去 -3. 当a事件被触发时 会执行4中的aaa自定义函数 同时获取参数 最终实现子组件向父组件传数据 - -**实例改造**
-根据父子组件之间的数据传递实现产品列表的组件化开发 -
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020040312280456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-**代码如下** - -``` - - - - - - - Document - - - - -
- - -
- - - - - -``` -
- - 
小测试：
- - - - -通过上面的案例，下列说法不正确的是？

+对于父子组件通讯下列说法不正确的是？

## 答案 -父组件向子组件通讯只能使用 props 一种方法 +父组件向子组件通讯只能使用 props 一种方法。 ## 选项 ### A -子组件向父组件传参逻辑是通过$emit调用父组件的自定义方法的时候进行传参 +子组件向父组件传参可以通过$emit调用父组件的自定义方法的时候进行传参。 ### B -props负责获取父组件的传递过来的，props中的值是只读的，不允许修改 +props负责获取父组件传递过来的数据，props中的值是只读的，不允许直接修改。 ### C -props负责获取父组件的传递过来的值也可以通过插值表达式展示在页面中 +Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。 diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" index ba46c16..91e90e1 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" @@ -14,121 +14,6 @@ const bus =new Vue() >2. 组件B触发bus上对应的事件，把 值当成参数来传递 >3. 组件A通过事件处理程序获取数据 > -
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403124524548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-**最终点击h2控制台会输出2**
-1. 创建1和2两个非父子组件以及vue实例bus -2. 在1组件中 钩子函数created中通过**bus.$on**为bus自定义一个事件aa -3. 在2组件中 当点击h2元素时触发dian函数 并且将值出过去 -4. 在2组件的dian函数中通过**bus.$emit**方触发1中的aa事件 并传参过去 -5. 当1中的aa事件被触发时会执行其中的函数并获取参数 - - -**通过非父子组件 实现开关灯案例**
- -关闭状态： -
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125323123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-开启状态： -
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125354722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) -
-**代码如下** - -``` - - - - - - - Document - - - - -
- - -
- - - - - -``` - -**非父子组件不仅这一种通讯方式，其他方式同学们可以去博文中查看** - -
- - 
小测试：
- @@ -136,7 +21,7 @@ const bus =new Vue() ## 答案 -eventBus其实就是当触发事件时，发送一个通知出去，在需要响应的地方接收这个通知，响应事件。 +eventBus其实就是A组件给eventBus注册一个事件，监听事件的处理程序，B组件通过触发eventBus上的事件并将要传递的值作为参数传递，A组件通过事件处理程序获得数据。 ## 选项 @@ -146,8 +31,8 @@ eventBus是非父子组件通讯唯一方式。 ### B -非父子组件之间进行通讯会造成内存泄漏。 +非父子组件之间进行通讯势必会造成内存泄漏，一般我们通过将非父子组件转化成父子组件在进行通讯。 ### C -VueX并不能解决非父子通讯问题。 +VueX 并不能解决非父子通讯问题。 diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md" index a8d7364..2fbf90d 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/exercises.md" @@ -1,51 +1,17 @@ # 插槽 -  
小常识：
-
-下方的alert-box是一个组件，和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样： - -```javascript - - Something bad happened. - -``` - -可能会渲染出这样的东西：
-
![在这里插入图片描述](https://img-blog.csdnimg.cn/7a782ff974ab4eee995d84c15b2a81f1.png) -
- - -幸好，Vue 自定义的 `` 元素让这变得非常简单： - -```javascript -Vue.component('alert-box', { - template: ` -
- Error! - -
- ` -}) -``` - -如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！ -
- - 
小测试：
- - -下列关于插槽描述错误的是？

+下列关于插槽描述不正确的是？

## 答案 -Vue中使用插槽是为了解决解决组件美观问题。 +Vue中使用插槽仅仅是为了解决解决组件美观问题。 ## 选项 ### A -插槽就是子组件中的提供给父组件使用的一个占位符 +插槽是子组件中的提供给父组件使用的一个占位符。 ### B diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md" index 82b9b46..383a089 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/5.\345\212\250\346\200\201\347\273\204\344\273\266\343\200\201\345\274\202\346\255\245\347\273\204\344\273\266/exercises.md" @@ -1,97 +1,22 @@ # 动态组件、异步组件 - 
小常识：
-
- -**动态组件** -之前在个多标签的界面中我们通过 is attribute 来切换不同的组件： - -```javascript - -``` -当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。 - -重新创建动态组件的行为通常是非常有用的，在一些案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 `` 元素将其动态组件包裹起来。 - -```javascript - - - - -``` - -注意这个 `` 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。 - -**异步组件** -在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如： - -```javascript -Vue.component('async-example', function (resolve, reject) { - setTimeout(function () { - // 向 `resolve` 回调传递组件定义 - resolve({ - template: '
I am async!
' - }) - }, 1000) -}) -``` - -如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用： - -```javascript -Vue.component('async-webpack-example', function (resolve) { - // 这个特殊的 `require` 语法将会告诉 webpack - // 自动将你的构建代码切割成多个包，这些包 - // 会通过 Ajax 请求加载 - require(['./my-async-component'], resolve) -}) -``` - -你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以这样使用动态导入： - -```javascript -Vue.component( - 'async-webpack-example', - // 这个动态导入会返回一个 `Promise` 对象。 - () => import('./my-async-component') -) -当 -``` - -使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数： - -```javascript -new Vue({ - // ... - components: { - 'my-component': () => import('./my-async-component') - } -}) -``` - -如果你是一个 Browserify 用户同时喜欢使用异步组件，很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”，至少官方不会。Browserify 社区已经找到了一些变通方案，这些方案可能会对已存在的复杂应用有帮助。对于其它的场景，我们推荐直接使用 webpack，以拥有内置的头等异步支持。 -
- - 
小测试：
- - 以下关于动态组件和异步组件的说法不正确的是？

## 答案 -Vue 允许我们以一个工厂函数的方式定义组件只能收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用 +`` 要求被切换到的组件都要有名字并且keep-alive包裹的一组组件名字都要相同。 ## 选项 ### A -使用动态组件标签的组件实例能够被在它们第一次被创建的时候缓存下来 +用`` 元素可以将动态组件包裹起来，在它们第一次被创建的时候就会被缓存下来。 ### B -动态组件可以保持这些组件的状态，以避免反复重渲染导致的性能问题 +动态组件可以保持这些组件的状态，以避免反复重渲染导致的性能问题。 ### C -可以在工厂函数中返回一个 Promise +Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。 -- GitLab