vue2.0组件的写法归纳

对自己使用过的component的几种写法做一个总结,下次翻着也方便。

1.使用vue+webpack搭建架构的写法,下面是一个a.vue

<template>
  <div id="down1">
   </div>
</template>
<script>
export default{
    data() {
      return {
      }
    },
    methods: {}
}
</script>

然后在别的页面引用:

import a from 'a';
<template>
  <hello></hello>
</template>
<script>
export default{
    data() {
      return {
      }
    },
    components: {
         'hello':a
     }
}
</script>

2.引用vue.js,使用template标签,直接使用全局的Vue注册components

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <v-hello></v-hello>
        </div>
        <template id="vHello">
        </template>
    </body>
    <script src="vue.js"></script>
    <script>

        Vue.component('v-hello',{
            template: '#vHello'
        })

        new Vue({
            el: '#app'
        })

    </script>
</html>

3.引用vue.js,使用template标签,var 一个component

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <hello></hello>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        var hello={
            template: `<div>hello</div>`
        }
        new Vue({
            el: '#app',
            components:{
                  hello
            }
        })

    </script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容