Vue 组件介绍及使用

• 1. 什么是组件
• 2. 组件的使用
• 3. 全局组件注册语法糖
• 4. 组件模板抽离
• 5. 为什么组件的 data 必须是一个函数（经典问题）

1. 什么是组件

组件是可复用的 Vue 实例，通过自定义元素实现组件

组件名定义规范: html 不区分大小写，统一使用小写，多个单词使用短横线隔开（art-list）

2. 组件的使用

第一步: 创建组件构造器对象

const notice = Vue.extend({
template: `
<div>
<p>国庆放假通知</p>
<div>国庆节假期为10.1~10.7,共七天</div>
</div>
`,
});

第二步: 注册组件（全局组件、局部组件）

全局组件: 可在任意 vue 实例中使用

Vue.component("notice", notice);

局部组件: 哪个 vue 实例中注册才能在哪个 vue 示例中使用

3. 全局组件注册语法糖

https://cn.vuejs.org/v2/api/#Vue-component

全局组件注册语法糖写法: 将 Vue.extend() 的参数作为 Vue.component() 的第二个参数直接传入

4. 组件模板抽离

script 标签写法

<script type="text/x-template" id="notice">
<div>who im i</div>
</script>

template 标签写法

<template id="notice">
<div>how are you</div>
</template>

5. 为什么组件的 data 必须是一个函数（经典问题）

先抛出答案: 为了实现组件不管被复用多少次，组件中的 data 数据都是互相隔离的，互不影响

组件是不能访问 vue 实例中的数据的，组件是一个单独功能模块的封装，组件有属于自己的 html 模板，也有属于自己的数据 data, 只是这个 data 属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据

组件是可复用的 vue 实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件的中的 data 数据应该是相互隔离的，互不影响的。

先来看下以下代码

多次复用组件想实现数据共享可以这样写: return 一个对象变量，因为变量存储的是内存地址