Vue组件化编程

非单文件组件

一个文件中包含有n个组件

单文件组件

一个文件中只包含有1个组件

创建组件

Vue.extend({
    template:`
    	<div>
    		<h2>学生姓名：{{studentName}}</h2>
    		<h2>学生年龄：{{age}}</h2>
    	</div>
    `
	data(){
        return{
            schoolName:'456',
            address:'北京'
        }
    }
})
//组件定义时，其中不能加入el配置项，因为最终所有的组件都要被一个vm管理
//组件中的参数写为函数式，避免与外部的对象式内存冲突

注册组件

//new vue时加入参数
components:{
	school:a
}

//全局注册组件
Vue.component('hello',hello)

组件嵌套

const school=Vue.extend({
    template:`
    	<div>
    		<h2>学校名称：{{name}}</h2>
    		<h2>学校地址：{{address}}</h2>
    		<student></student>
    	</div>
    `,
	data(){
        return{
            name:'456',
            address:'北京'
        }
    },
    components:{
        student
    }
})

const student=Vue.extend({
    template:`
    	<div>
    		<h2>学生姓名：{{name}}</h2>
    		<h2>学生年龄：{{age}}</h2>
    	</div>
    `,
	data(){
        return{
            name:'456',
            age:'18'
        }
    }
})

new Vue({
    components:{
		school:school
	}
})

VueComponent构造函数

组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是指向VueComponent

在new Vue配置中，均是指向Vue实例对象

Vue单文件组件

<template>
//组件的结构
</template>

<script>
//组件交互相关的代码
	export default 单文件名   暴露给其他文件
</script>

<style>
//组件的样式
</style>

Vue脚手架

//命令行输入
npm install -g @vue/cli

vue create 项目名称

npm run serve

//展示vue的配置文件，以js文件形式展示
vue inspect > output.js

ref属性

效果等同于html元素中的id

访问方式为：this.$ref

添加ref属性的元素会在VueComponent实例对象ref属性中添加对应的参数，如果组件添加ref属性则会将其实例对象放入ref中

props配置

使用组件时，传入对应参数

image-20220721095500511

在原组件中添加props属性，确认接受对应的参数

image-20220721095626783

接受时对类型进行限制

image-20220721100332003

mixin混入

当多个组件中有共同的内容时，可以使用混合进行重复使用

image-20220721101735639

image-20220721101645079

内容与组件中属性发生冲突时以组件中的内容为主。如果是钩子函数，那么都会运行。

插件

Vue.use使用插件

插件中可以调用Vue的缔造函数，为其添加参数

image-20220721102805991

scoped标签

当不同组件的css引入时，如果id、class一致会发生冲突。

在style中加入scoped标签就会限制此样式的作用域。