全局组件定义的四种方式

最新推荐文章于 2024-04-26 16:06:24 发布

黄梅之俊雅

最新推荐文章于 2024-04-26 16:06:24 发布

阅读量325

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_58511059/article/details/128526045

版权

全局组件定义的四种方式：

1. 使用Vue.extend 配合Vue.component
2. 直接使用Vue.component方法
3. 将模板字符串，定义到script标签中
4. 将模板字符串，定义到template标签中

在认识到定义组件的四种方式之前，首先要知道什么是组件？

组件：就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

第一种：

<script>
    //1、使用Vue.extend 配合Vue.component
    var login = Vue.extend({
      template: "<h1>登录</h1>",
    });
    // Vue.component('组件名',扩展名)
    Vue.component("loginto", login);
  </script>

第二种：

<script>
    //2、直接使用Vue.component方法：
    Vue.component("register", {
      template: "<h1>注册</h1>",
    });
  </script>

第三种：

 <!-- // 3、将模板字符串，定义到script标签中 -->
  <script id="tmpl" type="x-template">
    <div><a href="">登录</a>|<a href="">注册</a></div>
  </script>
  <!-- 同时，需要使用 Vue.component('组件名'，{}) 来定义组件： -->
  <script>
    Vue.component("account", {
      template: "#tmpl",
    });
  </script>

第四种：

<!-- 视图层 -->
    <div id="app">
      <!-- 组件 -->
      <course></course>
    </div>
    <template id="course">
      <!-- 第四种方式 -->
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
      <!-- <div><a href="#">登录</a> | <a href="#">注册</a></div> -->
    </template>

<!-- 4、将模板字符串，定义到template标签中-->
  <!-- 同时，需要使用 Vue.component 来定义组件： -->
  <script>
    Vue.component("course", {
      template: "#course",
    });
  </script>

补充：

私有组件的定义：

写在Vue实例化对象中，与data：{}、methods：{}平级。

 <!-- 视图层 -->
    <div id="app">
      <my-header></my-header>
    </div>
    <template id="mine">
      <div>
        我是第四种方式
      </div>
    </template>

<script>
    // 调度层 VM
    var vm = new Vue({
      // vue控制的区域
      el: "#app",
      data: {},
      methods: {},
      //私有定义 components
      components: {
        "my-header": {
          template: "#mine",
        },
      },
    });
  </script>