当前位置 > it书童 > vue > 正文

vue 组件基本使用

vue it书童 2019-10-04 20:31:14 0赞 0踩 388阅读 0评论

组件是可复用的 Vue 实例,且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用

全局组件

<div id="app">
    <!-- 使用组件的方式:将组件名作为标签名 -->
    <mycomponent></mycomponent>
    <!-- 组件可任意次数调用 -->
    <mycomponent></mycomponent>
</div>
<script>
    Vue.component('mycomponent', {
        template: '<h2>自定义的全局组件</h2>'
    })
    var app = new Vue({
        el: '#app',
    })
</script>

上面代码中我们直接使用 Vue.component() 方法定义了组件,而这个 mytemp 组件可以用在所有 vue 实例中,这种组件被称为 全局组件

私有组件

在具体的某个vue实例中,也可以定义组件,但是组件仅会在具体的 vue 实例中起作用,这种组件被称为 局部(私有)组件

<div id="app">
    <!-- 使用组件的方式:将组件名作为标签名 -->
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <!-- 不起作用 -->
    <mycomponent></mycomponent>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            mycomponent: {
                template: '<h2>自定义的全局组件</h2>',
            }
        }
    })
    var app2 = new Vue({
        el: "#app2",
    })
</script>

注意

组件名如果是驼峰法命名,使用组件时要将大写字母改为小写,并且在前面加上 -

组件中的 template 属性必须有一个唯一的根元素,否则会报错

    <div id="app">
        <!-- 大写字母应用 - 隔开 -->
        <my-component></my-component>
        <!-- 用小写不起作用 -->
        <mycomponent></mycomponent>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            // 该实例的私有组件
            components: {
                myComponent: {
                    template: '<h2>自定义的全局组件</h2>',
                }
            }
        })
    </script>

组件使用实例

三栏布局

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <style>
    .top {
      height: 50px;
    }
    .left, .right {
      float: left;
      height: 300px;
      width: 50%;
    }
  </style>

<div id="app">
  <top></top>
  <left></left>
  <right></right>
</div>

<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            top: {
                template: '<div class="top bg-primary"></div>'
            },
            left: {
                template: '<div class="left bg-success"></div>'
            },
            right: {
                template: '<div class="right bg-warning"></div>'
            },
        }
    })
</script>

源码

组件中的数据及方法

组件是带有名字的可复用的 Vue 实例 ,所以它们与 new Vue 实例对象接收相同的参数选项 datacomputedwatchmethods , 但 el例外;

虽然组件和实例对象可以接收相同的参数选项,但在具体使用中,vue 实例对象的 data 与组件中的 data 还是有差异的, 在自定义的组件中,data 必须是一个函数

<div id="app">
    <my-component></my-component>
</div>
<script>
    var app = new Vue({
        el: '#app',
        // 该实例的私有组件
        components: {
            myComponent: {
                // 组件中的data必须是一个函数
                data: function(){
                    return {msg: '点我啊'}
                },
                methods: {
                    clickme() {
                        alert('点了');
                    }
                },
                template: '<div @click="clickme">{{ msg }}</div>'
            }
        }
    })
</script>

vue实例也是组件

通过 new Vue() 可以得到一个实例对象,其实这个实例对象就是一个特殊的组件,也有 template 参数,也可以当做组件来使用

<div id="app">
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据'
        },
        template: '<h2>组件</h2>'
    })
</script>

上面的代码中直接为Vue 实例对象传入了 template 参数,那么 vue 会使用template中的数据替换 el 选中的整个 DOM 节点 , 因此 data 选项中的的数据也不会绑定,因为在绑定数据之前,整个 DOM 节点包括节点中 {{msg}} 都会被替换;如果想让数据正常绑定,我们可以在 template 数据中加入 {{msg}}

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '数据'
            },
            template: '<h2>组件{{ msg }}</h2>'
        })
    </script>
转载须注明出处:https://www.itshutong.com/articles/238/basic-use-of-vue-components
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录