Vue组件之入门：全局组件三种定义

不论我们使用哪种方式创建出来的组件，组件中的template属性指向的模板内容中，必须有且只有一个根元素，其他元素必须在这个根元素下面。1.使用Vue.extend配合Vue.component定义全局组件在使用Vue.extend配合Vue.component定义全局组件时，Vue.extend里面定义template模板，而Vue.component里面是要注册一个...

mykefei

12670人浏览 · 2018-11-05 09:27:23

mykefei · 2018-11-05 09:27:23 发布

不论我们使用哪种方式创建出来的组件，组件中的template属性指向的模板内容中，必须有且只有一个根元素，其他元素必须在这个根元素下面。

1.使用Vue.extend配合Vue.component定义全局组件

在使用Vue.extend配合Vue.component定义全局组件时，Vue.extend里面定义template模板，而Vue.component里面是要注册一个组件。

<body>
<div id="app">
  <!--第三步页面中使用 -->
  <!-- 如果要使用组件，直接把组件的名称以HTML标签的形式引入到页面中-->
  <my-compnent></my-compnent>
</div>
<script>
  //第一步：使用Vue.extend来创建全局组件
  var com1 = Vue.extend({
    //通过template模板的属性来展示组件要显示的html
    template: '<h2>使用Vue.extend创建全局组件</h2>'
  });
  //第二步：使用 Vue.component('组件名称',创建出来的组件模板对象)
  Vue.component('myCompnent', com1);
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
  });
</script>
</body>

【注意】在定义注册组件时，组件的名称不需要按照驼峰命名，但是在页面引入组件时，组件的名称必须按照驼峰命名。

简写如下：

2.直接使用Vue.component定义全局组件

这里是直接使用Vue.component直接创建一个组件

<div id="app">
  <my-com2></my-com2>
</div>
<script>
  Vue.component('myCom2', {
    template: '<h2>直接使用Vue.component创建组件</h2>'
  });
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
  });
</script>

3.Vue外部直接定义template

<body>
<div id="app">
  <my-com3></my-com3>
</div>
<template id="tmp1">
  <div>
    <h2>这是通过template元素，在外部定义组件的结构，有代码的提示和高亮</h2>
  </div>
</template>
<script>
  Vue.component('myCom3', {
    template: "#tmp1"
  });
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
  });
</script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^