Vue 创建组件的方式

Vue 创建组件的方式

2018年08月07日 11:10:56 虔诚带着决然 阅读数：1015

 

版权声明：本文为博主原创文章，未经博主允许不得用做其他商业活动。 https://blog.csdn.net/weixin_42218847/article/details/81477836

方式一

 <!--1.1使用Vue.extend来创建全局的Vue组件-->
     var tem1 = Vue.extend({
      template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
    });
 <!--1.2使用Vue.component('组件名称',创建出来的组件模板对象)-->
     Vue.component('myTem1',tem1);

    /*
     <!--注意-->
      使用 Vue.component() 定义全局组件的时候，
        组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
        组件名称不使用驼峰命名，则直接拿名称来使用即可
     */

     <!--组合方式-->
    Vue.component('myTem1',Vue.extend({
        template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))

   <div id="app">
        <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中-->
        <my-tem1> </my-tem1>
    </div>

方式二

直接使用Vue.component()

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

但是这样写会有一个问题：

<!--在h3标签后紧接一个span标签的话就会出问题了-->
  <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span>

这个问题是在 组件template属性指向的模板内容，必须有且只能有唯一的一个根元素
所以修改代码如下：

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

运行结果如下：

不过这种方式也有一个瑕疵，就是template 属性的值是HTML标签，而在软件中，并没有智能提示，容易出错，若使用这种方式，需要仔细，避免出错

方式三

<!--1.定义组件：-->
     Vue.component('mycom3',{
            template : '#tem1'
     });

 <!--2.在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构-->
    <div id="app">
         <!--3. 引用组件 -->
          <mycom3></mycom3>
    </div>

    <template id="tem1">
        <div>
            <h1>这是 template 元素</h1>
            <span>这种方式好用</span>
        </div>
    </template>

运行结果如下：

这是Vue创建组件(全局)的3种方式，其实相差不多，希望对大家有所帮助

Vue 创建组件的方式

[Vue chuàngjiàn zǔjiàn de fāngshì]

How Vue creates components