vue组件

时间 2019-11-11

标签 vue 组件繁體版

原文原文链接

什么叫组件：

有结构HTML
有样式CSS
有交互（效果）
行为
信号量存数据

组件的行为能够定制？

经过属性设置

在Vue中有什么样的组件(组件进行分类)：

实现基本功能的基础的组件（最小的元素）
可复用的逻辑组件（业务组件）

页面组件

页面上全部的东西全都是组件：造成了组件树

理解组件的建立和注册

咱们用如下几个步骤来理解组件的建立和注册：html

Vue.extend()是Vue构造器的扩展，调用Vue.extend()建立的是一个组件构造器，而不是一个具体的组件实例。vue
Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML。app
使用Vue.component()注册组件时，须要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。code
Vue.component()方法内部会调用组件构造器，建立一个组件实例。component
组件应该挂载到某个Vue实例下，不然它不会生效。htm

组件的使用

须要使用Vue.extend方法建立一个组件，而后使用Vue.component方法注册组件。Vue.extend方法格式以下：对象

var MyComponent = Vue.extend({
   // 选项...后面再介绍
})

使用Vue.component(tagName, options)方法注册组件:ip

Vue.component('my-component', {
  // 选项
})

组件在注册以后，便可在HTML标签中使用这个组件名称，像使用DOM元素同样。作用域

<div id="example">
    <my-component></my-component>
</div>

下面看一个例子:io

// 定义
var MyComponent = Vue.extend({
    template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 建立根实例
new Vue({
    el: '#example'
})

局部注册

你没必要把每一个组件都注册到全局。你能够经过某个 Vue 实例/组件的实例选项 components 注册仅在其做用域中可用的组件：

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

父组件和子组件

咱们能够在组件中定义并使用其余组件，这就构成了父子组件的关系.

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <parent-component>
            </parent-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var Child = Vue.extend({
            template: '<p>This is a child component!</p>'
        })
        
        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template :'<p>This is a Parent component</p><child-component></child-component>',
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })
        
        // 全局注册Parent组件
        Vue.component('parent-component', Parent)
        
        new Vue({
            el: '#app'
        })
        
    </script>
</html>

咱们分几个步骤来理解这段代码：

var Child = Vue.extend(...)定义一了个Child组件构造器
var Parent = Vue.extend(...)定义一个Parent组件构造器
components: { 'child-component': Child }，将Child组件注册到Parent组件，并将Child组件的标签设置为child-component。
template :'<p>This is a Parent component</p><child-component></child-component>'，在Parent组件内以标签的形式使用Child组件。
Vue.component('parent-component', Parent) 全局注册Parent组件
在页面中使用<parent-component>标签渲染Parent组件的内容，同时Child组件的内容也被渲染出来
Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用。

组件注册语法糖

以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖
使用Vue.component()直接建立和注册组件：

// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
    template: '<div>This is the first component!</div>'
})

var vm1 = new Vue({
    el: '#app1'
})

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。使用这种方式，Vue在背后会自动地调用Vue.extend()。