其他分享
首页 > 其他分享> > Vue非单文件组件

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