[亲测]Vue组件

╰+攻爆jí腚メ 2022-04-22 14:44 223阅读 0赞

# 1.组件化 #

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航、尾部信息模块。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

## 1.1.定义全局组件 ##

我们可以使用 Vue.component 来定义一个组件：

Vue.component(组件名称, Vue对象)

在 Vue 对象中我们需要使用 template 来定义组件的 HTML 部分。

（提示：在 ES6 中我们可以使用 模板字符串\` 符号来定义多行字符串）

示例：

Vue.component('hello', { 
        template: `<p>Hello World !</p>`
    })

注意：template 中的 HTML 代码必须要写在一个根元素中。

什么是根元素呢？看下图：

根元素：最外层要有一个标签。

![在这里插入图片描述][20181126174644298.png]

*  案例：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]

*  案例实现

*  组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
 *  不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
 *  但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
 *  全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
 *  data的定义方式比较特殊，必须是一个函数。

总结一下：

*  全局组件只能有一个根元素
 *  组件中有data、methods、created、computed
 *  data一定要定义成方法，而且必须要有返回值

## 1.2.组件的复用 ##

定义好的组件，可以任意复用多次：

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

> **组件的data属性必须是函数**！

当我们定义这个 `<counter>` 组件时，它的data 并不是像这样直接提供一个对象：

data: { 
      count: 0
    }

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () { 
      return { 
        count: 0
      }
    }

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

案例：

## 1.2.局部注册 ##

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = { 
        template:'<button v-on:click="count++">点击 { { count }} </button>',
        data(){ 
            return { 
                count:0
            }
        }
    };

然后在Vue中使用它：

var app = new Vue({ 
        el:"#app",
        components:{ 
            counter:counter // 将定义的对象注册为组件
        }
    })

*  components就是当前vue对象子组件集合。
    
     *  其key就是子组件名称
     *  其值就是组件对象的属性
 *  效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

## 1.3.组件通信 ##

通常一个页面会以一棵嵌套的组件树的形式来组织：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]

*  页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
 *  左侧内容区又分为上下两个组件
 *  右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

### 1.3.1.父向子传递props ###

父组件是通过props属性给子组件通信的来看下代码：

父组件：

<parent>
        <child :child-com="content"></child> //注意这里用驼峰写法哦
    </parent>
    
    data(){ 
        return { 
            content:'lixin'
        };
    }

子组件通过props来接受数据

第一种方法

props: ['childCom']

第二种方法

props: { 
        childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦
    }

第三种方法

props: { 
        childCom: { 
            type: String,
            default: 'lixin' 
        }
    }

### 1.3.2.子向父传递$emit ###

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据，废话少说，上干货

子组件代码

<template>
        <div @click="open"></div>
    </template>
    
    methods: { 
       open() { 
            this.$emit('showbox','the msg'); //触发showbox方法，'the msg'为向父组件传递的数据
        }
    }

父组件

<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法
    
    methods: { 
        toshow(msg) { 
            this.msg = msg;
        }
    }

### 1.3.3.兄弟传递$emit $on ###

我们可以实例化一个vue实例，相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>
    methods: { 
        ge() { 
            vm.$emit('blur','lixin'); //触发事件
        }
    }

组件小弟接受大哥命令

<div></div>
    created() { 
      vm.$on('blur', (arg) => {  
            this.test= arg; // 接收
        });
    }

[20181126174644298.png]: /images/20220414/2d9d4939e8df4cecadef52f9d822e908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]: /images/20220414/82c9cd3c28f742fab930b8e0a81aa2e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]: /images/20220414/0e9c485037bc4daf9d444cc014344b0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]: /images/20220414/0b21ae976641464fb30271a72e985af0.png