面试题vue组件的相关问题

面试题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
  			}
  		]
  

这样子对比是不是很直观，也很明确

更详细链接