Vue——组件基础

10 组件基础

---

1. 组件是可复用的 Vue 实例，所以它们与 new Vue 接受同样的选项，例如：data, computed, watch, methods 以及生命周期钩子。仅有的例外是 el 这样的根实例特有的选项。

   • 这段话让我有点迷。就目前来看，template 和 props 好像是组件特有的吧？

2. 组件的复用。你每用一次组件，就会有一个它的 新实例 被创建。

3. 一个组件的 data 选项必须是一个函数。因此每个实例可以维护一份被返回对象的独立的拷贝。

   // 定义一个名为 button-counter 的新组件
   Vue.component('button-counter', {
     data: function () {
       return {
         count: 0
       }
     },
     template: 'You clicked me {{ count }} times.'
   })
   

   • 那么相应的，组件的 methods、computed 等选项呢？应该也需要通过函数放回对象吧？

4. 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：

   Vue.component('my-component-name', {
     // ... options ...
   })
   

5. 通常一个应用会以一棵嵌套的组件树的形式来组织。全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

   • 如何用在组件树中的子组件的模板中？
   • 深入了解 组件注册

6. 通过 Prop 向子组件传递数据。

   • 有一个问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。

   • 也就是说子组件无法通过“{{}}”这样的的语法来访问父组件中的 data，但是，子组件标签上的 attribute 却可以访问父组件，所以便有了子组件的 props ，用于自定义 attribute 。

   • Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

     Vue.component('blog-post', {
      props: ['title'],
      template: '
     {{ title }}
     '
     })
     

   • 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

   • 总结，组件实例中可以访问模板上的 prop (attribute) ,模板上的 attribute 可以访问父组件中的 data ，所以组件实例通过自定义 prop 访问父组件。

   • 我们可以使用 v-bind 来动态传递 prop。

   • 深入了解 Prop

7. 单个根元素

   • 总之，必须单个根元素。
   • 把多个 prop 组成一个对象(一个 prop )，这是比较好的实践。

8. 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件。同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件。

   • 有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 event 访问到被抛出的这个值。
   • 或者，如果这个事件处理函数是一个方法，那么这个值将会作为第一个参数传入这个方法。
   • 在组件上使用 v-model 这小节非常值得学习。反复阅读
   • 深入了解 自定义事件

9. 插槽。Vue 自定义的 元素。向组件传递内容。

   • 官方文档这小节根本就没讲啥东西。。。直接就告诉你，深入了解 插槽

10. 动态组件

    • 什么叫动态组件？即可以把一个 DOM 元素动态的切换为其他组件。比如，点击一个按钮，blog-post 组件切换为了 new-blog-post 组件。怎么做到这点呢？
    • 可以通过 Vue 的 元素加一个特殊的 is attribute 来实现。

    • 顾名思义。这个词居然能用在代码中，优秀！（题外话，语义化真好）上面这段代码大概可以这样理解：这个 component is currentTabComponent 。
    • 在上述示例中，currentTabComponent 可以包括
      • 已注册组件的名字，或
      • 一个组件的选项对象
    • 什么叫一个组件的选项对象呢？文档给了两个很不错的例子，使用已注册组件的名字，使用一个组件的选项对象
    • 接下来这段就让人云里雾里了。“请留意，这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。对于像 value 这样的 property，若想让其如预期般工作，你需要使用 .prop 修饰器。”
    • 这个 attribute 值得是 is 吗？
    • 然后又提到了 DOM attribute 和 property 的区别，啥？有区别？然后根据文档提示（差别在哪里）了解了下。这有个翻译。。。DOM property 和 attribute 的区别详解
    • 深入了解动态和异步组件

11. 解析 DOM 模板时的注意事项

    • 这小节讲得很清楚。
    • 有的 HTML 元素内部只能使用特定的元素，有些 HTML 元素只能用在特定元素内部。有时会导致自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。
    • 可以通过 is attribute 变通。
    • 需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
      • 字符串 (例如：template: '...')
      • 单文件组件 (.vue)