本文主要是介绍Vue非单文件组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

组件

1. 组件的定义：实现局部功能效果的代码集合。（好维护、依赖关系不混乱、复用高）

单文件组件（.vue）与非单文件组件（.html）

1. 单文件组件：一个文件中只包含1个组件。
2. 非单文件组件：一个文件中包含n个组件。

在非单文件组件中创建组件

局部组件

  <div id="root">
    <!-- 编写组件标签 -->
    <compontentA></compontentA>
  </div>

// 创建一个组件
const compontentA = Vue.extend({
  data() {
    return {
      ...
    }
  }
})
//创建vm
new Vue({
  el: '#root',
  // 注册组件（局部组件）
  components: {
    compontentA
  }
});

全局组件

// 创建一个组件
const compontentA = Vue.extend({
  data() {
    return {
      ...
    }
  }
})
// 注册全局组件
Vue.compontent('compontent', compontent);
//创建vm
new Vue({
  el: '#root',
});

总结非单文件组件

1. Vue中使用组件三大步骤
     定义组件（创建组件）
     注册组件
     使用组件（写组件标签）
2. 如何定义一个组件？
     2.1 使用Vue.extend(option)创建，其中options和new Vue(option)时传入的那个option几乎一样，但也有点区别。
   区别如下↓
      el不要写听老大vm的 vm说在哪就在哪。
      data必须写成函数，避免组件复用时，数据存在引用关系。
   备注：要使用template来配置组件的结构。
3. 编写组件标签（使用组件）
   <组件名></组件名>
4. 创建组件一个简写方式：
        const test = Vue.extend(option) 可简写为：const test = option
5. 几大注意点
     4.1 关于组件名
      一个单词组成
        第一种写法（首字母小写）：test
        第二种写法（首字母大写）：Test
      多个单词组成
        第一种写法（kebab-case命名）：my-test
        第二种写法（CamelCase命名）：MyTest（需要Vue脚手架支持）
      备注：
        组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
        可以使用name配置项指定组件在开发者工具中呈现的名字。
     4.2 关于组件标签
        第一种写法：<test></test>
        第二种写法：<test/>
        备注：不用脚手架时，<test/>会导致后续组件不能渲染。

这篇关于Vue非单文件组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！