Vue项目注册组件

最新推荐文章于 2024-06-29 16:24:25 发布

果汁分半

最新推荐文章于 2024-06-29 16:24:25 发布

阅读量2.1k

点赞数 1

分类专栏： vue学习笔记文章标签： vue.js 前端 javascript 组件化

本文链接：https://blog.csdn.net/weixin_62946736/article/details/122892595

版权

本文详细介绍了Vue项目中组件的注册，包括全局组件和局部组件的创建与使用，以及单文件组件的步骤。讨论了组件嵌套、VueComponent概念及组件实例对象。还提醒了组件命名、标签编写和组件复用的注意事项。

摘要由CSDN通过智能技术生成

引言

关于vue项目组件的注册，以下是学习过程中的一些笔记，欢迎大家批评指正~

一、注册组件三大步骤

首先明确注册组件的三大步骤：

1、定义组件（创建组件）

2、注册组件

3、使用组件（写组件标签）

在这里会从非单文件组件和单文件组件进行知识的梳理。

二、非单文件组件

非单文件组件通俗的说就是一个文件中包含有多个组件。在这里将从注册全局组件和局部组件进行知识的梳理。

（一）全局组件

第一步创建 school 组件。组件内容为：显示学校名称、学校地址（数据如何展现）以及点击按钮提示学校名称（方法如何调用）。

第一步  创建 school 组件
const school = Vue.extend({
  template:` //使用模板语法
  <div class="schoolCom">
  <h2>学校名称：{
  {shoolName}}</h2>
  <h2>学校地址：{
  {shoolAddress}}</h2>
  <botton @click="showShoolName">点我提示学校名</botton> `,
  //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
  // el:'#root',
  data(){
    return{
      schoolName:'xxx大学',
      schoolAddress:'北京'
    }
  },
  methods:{
    showSchoolName(){
      alert(this.schoolName)
    }
  }
  
})

第二步注册全局组件（区别）。使用Vue.component(第一参数指的是组件名,第二个参数指的具体是哪个组件)注册全局组件。

// Vue.component(第一参数指的是组件名,第二个参数指的具体是哪个组件)
Vue.component("shool",school)

第三步：使用组件编写组件标签。

<!-- 准备好一个容器-->
	<div id="root">
	     <!-- 第三步：使用组件 编写组件标签 -->
		 <school></school>
		 <hr>
	</div>
    <div id="root2">
	     <!-- 第三步：使用组件 编写组件标签 -->
		 <school></school>
	</div>

需要注意的是，创建 vm 的时候，已经通过 vm 决定所创建的组件服务于哪个容器了，在上面的步骤流程中，所创建的 school 组件是服务于 “id = root” 的这个容器。

上述第一步和第二步也可以进行合并

注册全局组件
将第一步和第二步合并   "school"---组件名  {}---组件相关的函数、内容
Vue.component( "school", {
  template:` //使用模板语法
  <div class="schoolCom">
  <h2>学校名称：{
  {schoolName}}</h2>
  <h2>学校地址：{
  {schoolAddress}}</h2>
  <botton @click="showSchoolName">点我提示学校名</botton> `,
  //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
  // el:'#root',
  data(){
    return{
      schoolName:'xxx大学',
      schoolAddress:'北京'
    }
  },
  methods:{
    showSchoolName(){
      alert(this.schoolName)
    }
  }
})