面试题vue组件的相关问题

什么是组件

什么是组件:组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一个页面可以由多个组件构成，一个组件可用于多个页面
- vue框架中除了App.vue这个根组件外其余每个单个（.vue后缀的）页面就可以称之为一个组件。
- 组件是需要注册使用的，在router=>index.js中每个跟在component后面的就是一个组件

怎么创建一个组件

怎么创建一个组件：

// 1.使用 Vue.extend() 方法创建一个组件的构造函数，该构造函数继承了 Vue，（也就是说，我们创建的构造函数是 Vue 的子类）
 const GlobalComponent = Vue.extend({
            data: function () {
                return {
                    message: '组件的数据'
                }
            },
            template: '<div><h1>{{message}}</h1></div>'
        });

怎么注册一个组件

组件用法:组件需要注册后才可以使用，注册有全局注册和局部注册两种方式。
- 使用 Vue.component()来注册
```
  
// 2. 将 GlobalComponent 组件注册成全局组件
        Vue.component('global-component', GlobalComponent)
```

怎么在vue框架中注册使用组件

分全局注册和局部注册

vue框架中怎么全局注册组件

//在main.js文件夹中引入组件
import GlobalComponent from  './GlobalComponent'
//注册
 Vue.component('global-component', GlobalComponent)
//在页面种使用
<global-component></global-component>

vue框架中怎么局部注册组件

//在需要用到的vue页面中中引入
import LocalComponent from  './LocalComponent'
//注册 找到data函数同级下面写上components对象
data()return{
    
},
  components:{
      LocalComponent,   //这里用es6简写语法 
  }
//在页面种使用
 <local-component></local-component>

vue框架中路由管理中组件怎么使用：

创建组件的构造函数

	const Home = {
			name: 'home',
			template: '<div><h1>站点主页</h1></div>'
		}

		const News = {
			name: 'news',
			template: '<div><h1>新闻中心</h1></div>'
		}

		const About = {
			name: 'about',
			template: '<div><h1>关于我们</h1></div>'
		}

		const NotFound = {
			name: 'not-found',
			template: '<div><h1>404</h1></div>'
		}

创建路由（路由表），并配置路由信息

//路由对象中的 component 属性的值可以是通过 Vue.extend() 创建的组件构造函数，也可以是创建组件构造函数时传入的对象
const routes = [
			{
				path: '/',
				component: Home
			},
			{
				path: '/news',
				component: News
			},
			{
				path: '/about',
				component: About
			},
			{
				path: '*',
				component: NotFound
			}
		]