【Vue】高级系列（一）Vue组件定义与使用 - 非单文件组件 - 单文件组件 - VueComponent

最新推荐文章于 2024-05-07 14:50:28 发布

YK菌

最新推荐文章于 2024-05-07 14:50:28 发布

阅读量3.7k

点赞数 6

分类专栏：前端框架Vue 文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44972008/article/details/113179195

版权

本文详细介绍了Vue组件的概念，包括非单文件组件的定义、注册和使用，强调了组件命名规范。深入探讨了VueComponent的本质，并阐述了单文件组件的3个组成部分及其基本使用方法。同时，文章还提及了组件标签名与属性名的书写规则。

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

0. 组件的概念

传统方式编写应用

存在问题：

依赖关系混乱，不好维护
代码复用率不高

在这里插入图片描述

使用组件方式编写应用
在这里插入图片描述

组件的定义——实现应用中局部功能代码和资源的集合
在这里插入图片描述

1 非单文件组件

1.1 使用组件的三大步骤

定义组件（创建组件）
注册组件
使用组件（写组件标签）

1.2 如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue（options)时传入的那个options几乎一样，但有以下区别

不要写el——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
data必须写成函数——避免组件被复用时，数据存在引用关系

【备注】使用tempalte可以配置组件结构

1.3 如何注册组件

局部注册：new Vue的时候传入components选项
全局注册：Vue.component(‘组件名’, 组件)

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <hello></hello>
    <hr>
    <h1>{
  {msg}}</h1>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <school></school>
    <hr>
    <!-- 第三步：编写组件标签 -->
    <student></student>
  </div>

  <div id="root2">
    <hello></hello>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  //第一步：创建school组件
  const school = Vue.extend({
     
    template: `
				<div class="demo">
					<h2>学校名称：{
      {schoolName}}</h2>
					<h2>学校地址：{
      {address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
    // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
    data() {
     
      return {
     
        schoolName: '尚硅谷',
        address: '北京昌平'
      }
    },
    methods: {
     
      showName() {
     
        alert(this.schoolName)
      }
    },
  })

  //第一步：创建student组件
  const student = Vue.extend({
     
    template: `
				<div>
					<h2>学生姓名：{
      {studentName}}</h2>
					<h2>学生年龄：{
      {age}}</h2>
				</div>
			`,
    data() {
     
      return {
     
        studentName: '张三',
        age: 18
      }
    }
  })

  //第一步：创建hello组件
  const hello = Vue.extend({
     
    template: `

最低0.47元/天解锁文章