曹可爱之最可爱-Vue.js入门（十）组件1

最新推荐文章于 2024-08-18 14:45:00 发布

AprilCC

最新推荐文章于 2024-08-18 14:45:00 发布

阅读量313

点赞数

分类专栏：前端框架文章标签： html 浏览器

本文链接：https://blog.csdn.net/AprilCC/article/details/78410126

版权

前端框架专栏收录该内容

19 篇文章 0 订阅

订阅专栏

开篇废话：我的天！感觉这几天浏览器见了鬼了，Chrome先是无理由崩溃，然后是Safari莫名失踪了我刚还在编辑的blog！！！简直不想生气。好啦，那就开始了，哎。不行，很重要的组件，还是要打起精神！！！开始吧～～！！

组件

什么是组件？

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。

在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。（说实话，is特性现在也还不怎么了解，sad = =)

之前我们第一节还讲过：在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。

使用组件

全局注册

可以通过以下方式创建一个 Vue 实例：

new Vue({
  el: '#some-element',
  // 选项
})

要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  // 选项
})

组件在注册之后，便可以作为自定义元素 < my-component >< /my-component> 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：

<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

渲染为：

<div id="example">
  <div>A custom component!</div>
</div>

局部注册

不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件：

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

（你猜我懂了没 = =哭，真的没懂啊我去。希望用的时候能搞明白吧。）

DOM模版解析注意事项

当使用DOM作为模版时（例如，使用el选项来把Vue实例挂载到一个已有内容的元素上），会受到HTML本身的一些限制，因为Vue只有在浏览器解析，规范化模版之后才能获取其内容。

尤其要注意，像 < ul>、< ol>、< table>、< select> 这样的元素里允许包含的元素有限制，而另一些像 < option> 这样的元素只能出现在某些特定元素的内部。

在自定义组件中使用这些受限的元素时会导致一些问题，例如：

<table>
    <my-row>...</my-row>
</table>

自定义组件< my-row >会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>
    <tr is="my-row"></tr>
</table>

应当注意，如果使用来自以下来源之一的字符串模版，则没有这些限制：

< script type=”text/x-template”>
JavaScript 内联模版字符串
.Vue组件

因此，尽可能使用字符串模版。

data必须是函数

构造Vue实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data必须是函数。

<div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

var data = { counter 0 }

Vue.component('simple-counter', {
    templateL: '<button v-on:click="counter += 1">{{ counter }}</button>',
    <!-- 由于这三个组件实例共享了同一个data对象，因此递增一个counter会影响所有组件 -->
    <!-- 我们可以通过为每个组件返回全新的数据对象来修复这个问题。 -->
    data: function() {
        return {
            counter:0
        }
    })

new Vue({
    el: '#example-2'
})