vue全局组件和局部组件

Vue.js的组件化思想 —— 上

一、Vue中的组件

Vue视图层的灵魂 —— 组件化

vuea7.png

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

全局组件的创建和注册

vuea11.png

案例代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
<script src="js/vue.js"></script>
<script>
    // 1. 创建组件构造器
    var Profile = Vue.extend({
        template: '<h1>我是自定义组件</h1>'
    });

    // 2. 注册组件, 指定组件的名称
    Vue.component('my-component', Profile);

    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

调用Vue.extend()创建的是一个组件构造器，构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML；

调用Vue.component()注册组件时，需要提供2个参数：组件的标签名和组件构造器；注册的组件要挂载到某个Vue实例下，否则它不会生效；

Vue.extend() 和 Vue.component()：由于 Vue 本身是一个构造函数，Vue.extend() 是一个类继承方法，它用来创建一个 Vue 的子类并返回其构造函数。

而Vue.component() 的作用在于：建立指定的构造函数与 ID 字符串间的关系，从而让 Vue.js 能在模板中使用它；直接向 Vue.component() 传递 options 时，它会在内部调用 Vue.extend()。

局部组件的创建和注册

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册局部组件</title>
</head>
<body>
    <div id="root">
        <my-component></my-component>
    </div>
    <div id="root2">
        <my-component></my-component>
    </div>
<script src="js/vue.js"></script>
<script>
    // 1. 创建组件构造器
    var Profile = Vue.extend({
        template: '<li>创建局部组件!</li>'
    })
    new Vue({
        el: '#root',
        components: {
            'my-component': Profile
        }
    })
    new Vue({
        el: '#root2'
    })
</script>
</body>
</html>

另一种组件创建和注册方式

直接通过Vue.component注册或获取全局组件，主要体现在以下几种方式：

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component')

自定义全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  <div id="app">
      <my-component></my-component>
  </div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my-component', {
        template: '<h1>自定义全局组件</h1>'
    })
    new Vue({
        el:'#app'
    })
</script>
</body>
</html>

自定义局部组件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <my-component1></my-component1>
    <my-component2></my-component2>
</div>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            'my-component1': {
                template: '<h1>局部组件1!</h1>'
            },
            'my-component2': {
                template: '<h2>局部组件2!</h2>'
            }
        }
    })
</script>
</body>
</html>

1-10 vue全局组件和局部组件

1-10 vue全局组件和局部组件

vue全局组件和局部组件

Vue.js的组件化思想 —— 上

一、Vue中的组件

推荐阅读更多精彩内容