标签：文件 Vue option 创建 非单 组件 写法

组件

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,option,创建,非单,组件,写法
来源： https://www.cnblogs.com/bingquan1/p/15790890.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。