vue components组件

约定不等于承诺〃 2022-11-29 12:23 187阅读 0赞

## 组件 ##

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。

### 1.局部注册 ###

new Vue({
    	el...
    	components:{
    		组件名称:{
    			template:"组件的模板内容"
    		}
    	}
    })

使用：

在挂载点内以<组件名>这样的方式来使用组件，在挂载点内组件名称的地方，vue解析之后就会把组件的template模板中的内容展示出来。

### 2.全局注册 ###

局部注册的组件仅能在当前实例的挂载点内使用，如果需要在多个vue实例中使用同一个组件，就需要使用全局注册的方式来注册这个组件。

语法：

Vue.component('组件名',{template:"模板内容"})
    new Vue({})
    new Vue({})
    ...

### 3.注意事项 ###

(1)Do not use built-in or reserved HTML elements as component id: div

不能使用系统内置的标签名作为组件名

组件名称使用系统内置的名字全大写也不行，浏览器会把大写字母解析成小写

(2)Unknown custom element: - did you register the component correctly?

组件未正确的注册就使用了

如果组件名称中确实包含大写字母，在使用组件时，要把大写字母换成-小写字母

(3)Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

组件的template中只能有一个根标签。

### 4.template的使用 ###

vue中提供了一个template标签，它和其中的内容不会被浏览器直接解析出来。

因为组件的template属性使用字符串方式进行编写，没有语法提示，编写起来不方便且不容易维护，所以我们可以把template属性和template标签结合起来使用。

<div id="app">
            <one></one>
            <two></two>
        </div>
        <template id="one">
            <div>
                <h2>这是one组件的内容</h2>
                <p>这是一个段落</p>
            </div>
        </template>
        <template id="two">
            <div>
                <h3>这是two组件</h3>
            </div>
        </template>
        <script>
            new Vue({
                el:"#app",
                components:{
                    one:{
                        // 告知当前组件的template属性使用哪个template标签中的内容作为模板内容
                        template:"#one"
                    },
                    two:{
                        template:"#two"
                    }
                }
            })
        </script>

### 5.组件中的data要是一个函数 ###

受数据类型的影响，对象类型数据复用时，会影响数据的变化，在组件中定义data时，不能使用对象类型，要使用函数，在函数中返回一个新的对象，这样在复用组件时，每使用一次就会返回一个新的对象空间来存储数据。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>template的使用</title>
        <script src="../../node_modules/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            
            <p>数量：{
       { num }}<button @click="num++">增加</button></p>
            <p>数量：{
       { num }}<button @click="num++">增加</button></p>
            <p>数量：{
       { num }}<button @click="num++">增加</button></p>
            <hr>
            
            <v-count></v-count>
            <v-count></v-count>
            <v-count></v-count>
        </div>
        <template id="count">
            <p>数量：{
       { num }}<button @click="num++">增加</button></p>
        </template>
        <script>
            var vCount = {
                template:"#count",
                data(){
                    return{ num:100 }
                }
            }
            new Vue({
                el:"#app",
                components:{ vCount},
                data:{ num:100 }
            })
        </script>
    </body>
    </html>