Vue创建组件的三种方式

方式一：使用Vue.extend来创建全局的Vue组件1.1 使用Vue.extend来创建组件模板对象var com1 = Vue.extend({template:'<h3>这是使用Vue.extend创建的组件</h3>'//通过template属性，制定了组件要展示的html结构})1.2 使用 Vue.component完成...

北海之灵

4231人浏览 · 2018-09-03 16:03:54

北海之灵 · 2018-09-03 16:03:54 发布

方式一：使用Vue.extend来创建全局的Vue组件

1.1 使用Vue.extend来创建组件模板对象

var com1 = Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>'
    //通过template属性，制定了组件要展示的html结构
  })

1.2 使用 Vue.component完成组件的创建

Vue.component('组件的名称',创建出来的组件模板对象)

注意：使用Vue.component 定义全局组件的时候，如果组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 连接；如果不使用驼峰，则直接拿名称来使用即可。

Vue.component('myCom1',com1)

1.3 使用组件

如果要使用组件，直接把组件的名称，以html标签的形式引入即可

 <my-com1></my-com1>

注：第一步和第二步可以合为一步

Vue.component('mycom1', Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>'
}))

完整的代码：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <!-- 如果要使用组件，直接把组件的名称，以html标签的形式引入即可 -->
    <my-com1></my-com1>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  // 1.1使用Vue.extend来创建全局的Vue组件
  var com1 = Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>'
    //通过template属性，制定了组件要展示的html结构
  })
  //1.2 使用 Vue.component('组件的名称',创建出来的组件模板对象)
  //如果使用Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，
  //则在引用组件的时候，需要吧把大写的驼峰改为小写的字母，同时，两个单词之间，
  //使用 - 连接
  //如果不使用驼峰，则直接拿名称来使用即可;
  Vue.component('myCom1',com1)
  
  // 第一个参数，组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的
  //第二个参数: Vue.extend 创建的组件，template就是组件将来要展示的html内容
  Vue.component('mycom1', Vue.extend({
    template:'<h3>这是使用Vue.extend创建的组件</h3>'
  }))
  var vm = new Vue({
    el:'#app',
  })
  
</script>
</html>

方式二：使用Vue.component创建组件

创建组件

注意：template属性指向的模板内容，必须只能有唯一的一个根元素。

Vue.component('mycom2',{
    template:'<div><h3>这是使用Vue.component创建的组件</h3><span>123</span></div>'
})

使用组件的方法和方式一中的相同，直接把组件的名称，以html标签的形式引入即可。

完整代码：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <!-- 如果要使用组件，直接把组件的名称，以html标签的形式引入即可 -->
    <mycom2></mycom2>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  // template属性指向的模板内容，必须只能有唯一的一个根元素
  Vue.component('mycom2',{
    template:'<div><h3>这是使用Vue.component创建的组件</h3><span>123</span></div>'
  })
  var vm = new Vue({
    el:'#app',
  })
</script>
</html>

方式三：使用 template元素，定义组件的html模板结构

当组件的模板中元素较多时，可以在被Vue控制的 div 外面，使用 template元素，定义组件的html模板结构。

3.1 创建组件

这里的 #tmp1就是模板的id

Vue.component('mycom3',{
    template:'#tmp1'
})

3.2 编写模板

使用 template 标签，创建模板，模板要放在被 Vue 对象控制的 div元素的外面，这里模板的 id 和创建组件时的对应。

<template id="tmp1">
    <div>
      <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
      <h4>好用，不错</h4>
    </div>
</template>

使用组件时，直接把组件的名称，以html标签的形式引入即可。

完整代码：

<html>
  <head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <!-- 如果要使用组件，直接把组件的名称，以html标签的形式引入即可 -->
    <mycom3></mycom3>
  </div>
  <!-- 在被控制的 #app 外面，使用 template元素，定义组件的html模板结构 -->
  <template id="tmp1">
    <div>
      <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
      <h4>好用，不错</h4>
    </div>
  </template>
</body>
<script src="../lib/vue.js"></script>
<script>
  // template属性指向的模板内容，必须只能有唯一的一个根元素
  Vue.component('mycom3',{
    template:'#tmp1'
  })
  var vm = new Vue({
    el:'#app',
  })
</script>
</html>

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}$/, //不连续的两位字母// /^