vue组件讲解（is属性的用法）

时间：2021-12-11 20:45:41

什么是组件？

在说之前我们先搞清楚什么是组件？这样对我们下边的学习是很有帮助的。 
组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可以重复使用的代码。在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。在有些情况下，组件也可以是原生元素的形式，以is特性进行扩展。

怎么使用组件？

说道这里，组件是什么，我们都有了清楚的了解，但是怎么使用呢？ 
首先，我们要进行注册，才能进行使用

注册

之前我们也说过，可以通过new来创建一个VUE实例

new Vue ({

    'el' : '#element',

    //选项

})
  • 1
  • 2
  • 3
  • 4

这样，一个vue实例我们就创建成功了，这时候就要注册一个组件，我们可以通过Vue.component(tagName,options)。由于作用域的不同，组件也是分为全局组件和局部组件的，我们先来说全局组件。

Vue.component('my-component',{

    //选项

})
  • 1
  • 2
  • 3

一个全局组件就这样组册成功了，此后便可以在父实例的模块中以自定义元素<my-component></my-component>的形式进行使用。一定切记，要确保在初始化根实例之前注册了组件：

<div id='app'>

    <my-component></my-component>

</div>
  • 1
  • 2
  • 3
//注册组件

Vue.component('my-component',{

    'template' : '<div>一个全局组件</div>'

})

//创建根实例

new Vue({

    'el' : '#app',

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

以上渲染出来就是：

<div id='app'>

    <div>一个全局组件</div>

</div>
  • 1
  • 2
  • 3

局部注册

在开发中，我们不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域可用，代码如下：

var Child = {

    'template' : '<div>一个组件</div>'

}

new Vue({

    'el' : '#app',

    //...

    'component' : {

        'my-component' : Child

        //此时该模板只能在父实例中使用

    }

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

这种封装方式也可适用于其他可注册的Vue功能。如指令

DOM模板解析说明

当使用DOM作为模板时（例如，将el选项挂载到一个已知的元素上），你会受到HTML的一些限制，因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它保过的元素，而一些像option这样的元素只能出现在某些其他元素的内部。 
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>

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

</table>
  • 1
  • 2
  • 3

自定义组件<my-row>被认为是无效的内容，因此在渲染的时候会出现导致错误。变通的方案是使用特殊的is属性：

<table>

    <tr is='my-row'>...</tr>

</table>
  • 1
  • 2
  • 3

应当注意，如果我们使用下面来源之一的字符串模板，这些限制将不适用：

  • <script type='text/x-template'>
  • JavaScript内联模板字符串
  • .Vue组件 
    因此，有必要的话请使用字符串模板

data必须是函数

通过Vue构造器传入的各种选项大多数都可以在组件里使用。data是个例外，它必须是函数。实际上，如果我们这样做：

Vue.component('my-component',{

    'template' : '<span>{{message}}</span>',

    'data' : {

        'message' : 'hello'

    }

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

那么Vue会停止，并在控制台发出警告，告诉你在组件中data必须是函数。理解这种规则存在的意义很有帮助，让我们假设用如下方式来避开Vue的警告：

<div id='app'>

    <simple-counter></simple-counter>

    <simple-counter></simple-counter>

    <simple-counter></simple-counter>

</div>
  • 1
  • 2
  • 3
  • 4
  • 5
var data = {counter : 0}

Vue.component('simple-counter',{

    'template' : '<button v-on:click='counter += 1'>{{counter}}</button>'

    //技术上data是一个函数，所以Vue不会警告

    //但是我们返回给每个组件的实例调用了同一个data对象

    'data' : function (){

        return data

    }

})

new Vue({

    'el' : '#app'

})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

由于这三个组件共享一个data，因此增加一个counter会影响所有组件！很明显，这样做是不对的。我们可以通过为每个组件返回全新的data对象来解决这个问题，如下：

data : function (){

    return {

        counter : 0

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5

现在每个counter都有它自己内部的状态了。

构成组件

组件意味着协同工作，通常父子组件会是这样的关系：组件A在它的模板中使用了组件B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅度提高了组件的可维护性和可重用性。 
在Vue中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。如图： 
vue组件讲解（is属性的用法）

相关文章