Vue学习07-- Vue的组件

Vue学习07-- Vue的组件

组件开发：具备一定功能得页面片段

Vue的组件

Vue的组件是功能高内聚、业务低耦合的一个通用的方法、模块称为组件
​

组件是可复用的 Vue 实例，且带有一个名字，通常一个应用会以一棵嵌套的组件树的形式来组织。
Vue的组件在项目中以一个有着 .vue 后缀的文件的形式存在

如何定义一个组件

需要给vscode安装一些vue插件：Vetur和Vue 3 Snippets
​

一个vue组件需要三个模块

1. html 模板(template) – 直接书写html代码，根元素只能有一个
2. javascript scrpt模块 – 必须的模块，实现业务逻辑的地方
3. css样式 style – 编写css样式，若仅限当前页面使用，需要在style上添加scoped属性（原理是给所有的dom节点都添加一个额外的属性，所有的样式都添加一个对应的属性选择器）

​

因为组件必须是多例，所以这里不能对vue进行实例化，所以需要导出一个ComponentOptions vue的配置对象（本身是一个js对象，包含了data、method、render和components等等）。

<script>
    export default {}
</script>

如果这样写会报一个错
[Vue warn]: Failed to mount component: template or render function not defined.
即 挂载组件的时候错误了，template或则render方法没有定义
​

<template></template>
<script>
export default {
    render(ce) {
        return ce('p', ['这是Appvue'])
    }
}
</script>

注：template 和 render 方法有一个就可以了，不然有可能会报一个错：
The template root requires exactly one element.
即 vue的template根节点不能有重复元素，根节点只能有一个元素
​

template和render
现象：在不报错的情况下，如果页面同时存在template和render方法，会以template方法为主；
原因：因为.vue文件在页面执行的时候，会被webpack的vue-loader库将其编译成一个js文件，template会被编译成一个render方法，所以script模块中的render方法被覆盖掉。
​

组件的引入

由于Vue的组件在执行的时候会被编译成一个JS代码，所以要以引入js文件的方式引入Vue的组件

// import 组件名 from '组件相对当前文件的路径'
import PageNode from './Page'

组件的分类

1. 局部组件：哪个页面需要使用就直接引入
2. 全局组件：在main.js中使用Vue.component方法来实现全局组件的注册

第一个参数为：使用时组件的名字
第二个参数为：组件对象、组件构造函数

3. 动态组件

局部组件

Vue有一个专门用于关联组件的 **components **属性，注册组件到这个Vue实例对象中去，注册到实例中的组件就是局部组件。局部组件需要页面单独引入。
注意：局部注册的组件在其子组件中_不可用_

<template>
    
    <div>
        <h2 style="color: tomato" class="my-cls">我们要休息了！</h2>
        <!-- 因为这个组件是在script模块中引入的，因此引入和template没有任何关系 -->
        <!-- <PageNode/> -->
        <MyPage v-if="show"/>
    </div>
</template>

<script>
    // 引入子组件
    import PageNode from './Page'

    export default {
        data() {
            return {
                show: false
            }
        },
        components: {
            MyPage: PageNode
        }
    }
</script>

<style>
    .my-cls {
        font-size: 14px;
    }
</style>

​

全局组件

在Vue里是用Vue对象的 **component **方法来进行组件全局注册，全局组件在页面内不需要引用也可以直接使用
注：定义全局要在main.js里定义，全局的注册方法没有s

Vue的 component 方法解析：
component(id: string, constructor: VC): VC

由上面的描述可知 component 方法需要两个参数
参数一： id: string 表示组件唯一名字
参数二： constructor: VC 即 vuecomponent/vueconstructor 就是说需要一个组件实例的意思

// 需要引入Vue框架模块
import Vue from 'vue'

// 引入组件 './Page.vue' 可以简写为 './Page'
import PageNode from './Page'
// 定义一个全局组件
Vue.component('PageComponent', PageNode)

​

​