vue 组件基本使用

组件是可复用的 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>

组件使用实例

三栏布局

image

  <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 实例对象接收相同的参数选项 data、computed、watch、methods , 但 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/238.html