Vue_组件基础

目录

1.组件定义

2.组件注册

(1) 全局组件

 (2) 局部组件

 3.组件名

4.组件复用

5.自闭合组件

6.组件的 data 选项

---

1.组件定义

组件是可复用的Vue实例，可以作为自定义的元素使用。作为一个Vue实例，它可以接收与new Vue相同的选项，如data、computed、watch、methods以及生命周期钩子等，但是不能接收 el 这样根实例特有的选项。

【注】每个组件必须只有一个根元素，当模板的元素大于1时，可以将模板的内容包裹在一个父元素内

2.组件注册

(1) 全局组件

Vue.component( string, function | Object )

利用Vue.component创建的组件是全局注册的，也就是说它们在注册之后可以用在任何新创建的 Vue 根实例的模板中。如下例：

<div id="app1">
    <ths-cmp></ths-cmp>
</div>
<div id="app2">
    <ths-cmp></ths-cmp>
</div>
<script>
    Vue.component('ths-cmp', {
        template: `
        <div>我是一个全局组件</div>
    `
    })
    const vm1 = new Vue({
        el: '#app1'
    })
    const vm2 = new Vue({
        el: '#app2'
    })
</script>

 (2) 局部组件

在 component 选项中定义要使用的组件，对于 components 对象中的每一个属性来说，其属性名就是自定义元素的名字，属性值就是这个组件的选项对象

div id="app">
    <ths-cmp></ths-cmp>
    <ths-cmp></ths-cmp>
</div>
<div id="app1">
    <ths-cmp></ths-cmp>
    <ths-cmp></ths-cmp>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        components: {
            'ths-cmp': {
                template: `
                <div>我是局部组件1号</div>
            `}
        }
    })
    const vm1 = new Vue({
        el: '#app1',
        components: {
            'ths-cmp': {
                template: `
                    <div>我是局部组件2号</div>
                `
            }
        }
    });
</script>

 3.组件名

组件的命名方式有两种

1. 短横线分隔命名（kabab-case）：my-compontent
2. 大驼峰命名（PascalCase）：MyComponent

不管使用哪种命名方法，在引用组件的时候，都可以使用短横线分隔命名的组件，另外，使用大驼峰命名的组件，也可以是由每个单词首字母大写加短横线分隔的方式去引用，如下例:

<div id="app">
    <my-component></my-component>
    <!-- 首字母大写加短横线分隔也可以引用组件 -->
    <My-Component></My-Component>
    <ths-component></ths-component>
</div>
<script>
    // 大驼峰命名
    Vue.component('MyComponent', {
        template: `
            <div>我是一个大驼峰命名的组件</div>
        `
    })
    // 短横线分隔命名
    Vue.component('ths-component',{
        template:`
            <div>我是一个短横线分隔命名的组件</div>
        `
    })
    const vm = new Vue({
        el: "#app"
    })
</script>

【注】W3C规范中的自定义组件名（字母全小写且必须包含一个连字符）

4.组件复用

<div id="app">
    <ths-component></ths-component>
    <ths-component></ths-component>
    <ths-component></ths-component>
</div>
<script>
    Vue.component('ths-component', {
        template: `
        <div>我是一个组件</div>
    `
    })
    const vm = new Vue({
        el: "#app"
    })
</script>

5.自闭合组件

在单文件组件、字符串模板和JSX中没有内容的组件应该是自闭合的，但在DOM模板中不可以这样。

自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。

不幸的是，HTML并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用进入 DOM 之前的 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

6.组件的 data 选项

组件中的 data 选项是一个函数，每个实例可以维护一份被返回对象的独立的拷贝，如下例

<div id="app">
    <button-component></button-component>
    <button-component></button-component>
    <button-component></button-component>
</div>
<script>
    Vue.component('button-component', {
        data() {
            return {
                count: 0
            }
        },
        template: `
            <button @click="count ++">点击了{{count}}次</button>
        `
    })
    const vm = new Vue({
        el: "#app"
    })
</script>