Vue：（二十）组件

最新推荐文章于 2024-05-20 01:02:42 发布

置顶空谷有来人

最新推荐文章于 2024-05-20 01:02:42 发布

阅读量60

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128705237

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

Vue中使用组件的三大步骤

定义组件（创建组件）

注册组件

使用组件（写组件标签）

定义组件

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

区别如下：

el不要写——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

data必须写成函数——避免组件被复用时，数据存在引用关系

备注：使用templete可以配置组件结构

注册组件

局部注册：靠new Vue的时候传入components选项

全局注册：靠Vue.component('组件名'，组件)

使用组件

编写组件标签：<school></school>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>非单文件组件基本使用</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <school></school>
      <hr />
      <student></student>
    </div>
    <script type="text/javascript">
      const school = Vue.extend({
        template: `
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
          </div>
        `,
        data() {
          return {
            schoolName: '西航',
            address: '陕西西安',
          }
        },
      })
      const student = Vue.extend({
        template: `
          <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
          </div>
        `,
        data() {
          return {
            studentName: '空谷有来人',
            age: 18,
          }
        },
      })
      new Vue({
        el: '#root',
        components: {
          school,
          student,
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家关注！