Vue.js 组件 component

Posted 2020-08-20

什么是组件？

组件（component）是Vue.js最强大的功能之一，核心目标是扩展html元素，封装可重用的代码。我们可以把组件代码按照template、style、script的拆分方式，放置到对应的 .vue  文件中。

Vue.js的组件可以理解为预先定义好行为的ViewModel类，一个组件可以预定义很多选项，但最核心的是以下几个：

模板（template） --  模板声明了数据和最终展现给用户的DOM之间的映射关系

初始数据（data） --  一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态

接受的外部参数（props）  --  组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上而下），但也可以显示声明为双向绑定

方法（methods）  --  对数据的改动操作一般都在组件的方法内进行，可以通过v-on指令将用户输入事件和组件方法进行绑定

生命周期钩子函数（lifecycle hooks）  --  一个组件会触发多个生命周期钩子函数，比如created、attached、destroyed等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为Controller的逻辑分散到了这些钩子函数中

注册

1、全局注册     Vue.component(tagName, options)

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

如上所示，第一个参数是注册组件的名称（即在HTML中我们可以这样使用组件：<didi-component></didi-component>）；第二个参数是组件的构造函数，它可以是Function，也可以是Object

Function  --  第二个参数可以是用Vue.extend()创建的一个组件构造器

var myComponent = Vue.extend({
    //选项...
})

Object  --  第二个参数传入选项对象，Vue.js在背后自动调用Vue.extend()

//在一个步骤中扩展与注册
Vue.component(‘didi-component‘,{
    template:‘<div>A custom component!</div>‘
})

组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件：

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

<script src="//cdn.bootcss.com/vue/2.0.7/vue.js"></script>
<script>
    //注册
    Vue.component(‘my-component‘,{
        template:‘<div>A custom component!</div>‘
    })
    //创建根实例
    new Vue({
        el:‘#example‘
    })
</script>

2、局部注册

不需要每个组件都全局注册，可以让组件只能用在其它组件内。我们可以用实例选项components注册

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

<!-- 我在使用Vue2.0版本时报错-->
<script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>

    var Child = {
        template:‘<div>I am child</div>‘
    };
    var Parent = {
        template:‘<p>I am parent</p>‘+‘<child></child>‘,
        components:{
            //<my-component>只能用在父组件模板内
            ‘child‘:Child
        }
    };
    new Vue({
        el:‘#example‘,
        components:{
            ‘my-component‘: Parent
        }
    })
 </script>

DOM模板解析说明

当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <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 组件

因此，有必要的话请使用字符串模版。