Vue组件的创建方法详解-CSDN博客

本文介绍了在Vue.js中创建组件的三种方式：1. 使用vue.extend结合vue.component，2. 直接使用vue.component，3. 通过template模板创建。详细解析了每种方法的用法和应用场景。

三种创建方法：

注意：
1.模板template中只能有一个根节点
2.组件的名字，如果采用驼峰命名的话，如myName,那么在使用的时候只能只用my-name

1.vue.extend结合vue.component创建

<body>  
    <div id="app">
      <index-a></index-a>
    </div>
    <script>
      // Vue.extend()函数会返回一个组件的构造器，它里面包含一个参数，它是一个对象，里面是一些配置项
      // Vue.component()函数会利用Vue.extend()返回的构造器创建一个组件的实例，它有两个参数，一个是组件的名字，另一个组件的构造器
      var Index = Vue.extend({
        // 指定组件显示的模板
        template: "<div>我是首页</div>"
      })
      // 创建一个全局组件index-a
      Vue.component('indexA', Index)
      var vm = new Vue({
        el: '#app',
        data: {
        }
      })
    </script>
  </body>

vue.component创建

<body>
    <div id="app">
        <index-b></index-b>
    </div>
    <script>
        Vue.component('indexB', {
            template: `<div>我是首页</div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

template方式创建

<body>
    <template id='test'>
            <div>我是首页</div>
        </template>
    <div id="app">
        <index-c></index-c>
    </div>
    <script>
        Vue.component('indexC', {
            template: '#test'
        })
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>