vue组件

2024年1月26日 114次阅读 来源: 王志强

什么叫组件：

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

组件的行为可以定制？

通过属性设置

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

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

页面组件

页面上所有的东西全都是组件：形成了组件树

理解组件的创建和注册

我们用以下几个步骤来理解组件的创建和注册：

  1. Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例。

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

  3. 使用Vue.component()注册组件时，需要提供2个参数，第1个参数时组件的标签，第2个参数是组件构造器。

  4. Vue.component()方法内部会调用组件构造器，创建一个组件实例。

  5. 组件应该挂载到某个Vue实例下，否则它不会生效。

组件的使用

需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。Vue.extend方法格式如下：

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

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

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

组件在注册之后，即可在HTML标签中使用这个组件名称，像使用DOM元素一样。

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

下面看一个例子:

// 定义
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()。

    原文作者：王志强
    原文地址: https://segmentfault.com/a/1190000011963281
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞