55 Vue 组件系统

55 Vue 组件系统

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可服用的组件构建大型应用

组件定义及使用

---

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

定义组件选项对象

const options = {
    template: ``,
    data() {},
    props: {},
    methods: {},
    computed: {},
    components: {},
}

template 中的模板，需要使用单个根元素节点包裹布局结构

组件结构选项中的 data 必须是函数（不能数普通对象），在函数体内部，返回一个普通对象

为什么组件选项中的 data 必须是函数

组件是可被复用的，当创建同一个组件的多个实例时，如果 data 时普通对象，则每个实例中使用到的数据都指向的是同一个 data 对象中的数据，只要其中任意一个实例修改了数据，其他实例都会受影响，这通常与实际不符

为了解决该问题，将 data 设置为函数，在函数体内部，返回数据对象，当创建组件实例时，每创建一个实例则调用一次 data 函数获取到新的数据对象，这样同一个组件的不同实例间，数据对象就是独立的，修改一个实例中的数据，不会影响到其他实例化的数据

data 的写法

data() {
	return {}
}

props 表示组件接收到的属性

props 可设置为数组，表示最基本的组件可接收到的属性名称有哪些

props 也可设置为对象，表示对组件接收到的各属性进行验证

props: {
	// 属性名称为 title1
	title1: {
		// 类型为字符型
		type: String,
		// 必须传的参数
		required: true,
	},
	// 属性名称为 title2
	title2: {
		// 类型为布尔型
		type: Boolen,
		// 没有传参时的默认值
		default: "这是默认值",
	}
}

不要在组件中修改属性值，组件的属性应该是只读的，如果需要修改数据，只能修改 data 中的数据

注册组件

全局注册

Vue.component(compoentName, options)

局部注册

是在父组件的选项对象中，使用 components 字段来定义

const fatherOptions = {
    components: {
        son: sonOpions
    }
}

使用组件

使用组件名称作为自定义标签（元素）名称进行使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <father></father>
</div>

Vue.component(father, {
    template: `<div>
		<h4>父级</h4>
		<son></son>
	</div>`,
    components: {
        son: {
            template: `<h5>子级</h5>`,
        }
    }
})
new Vue({
    el: "#app",
})

实际 html 效果为

父级

子级

如果自定义的组件名称是驼峰命名或帕斯卡命名，在使用组件时，需要将其名称改为短横线命名规范使用

插槽

可利用插槽，在父组件中向子组件分发 HTML 内容

使用 slot 标签，在定义组件时去定义插槽位置

如果使用 slot 时添加了 name 属性，则将这种插槽称为命名（具名）插槽

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <my-html>
        <!-- v-slot可以简写为 # -->
        <!-- 可以写作 <template #content> -->
        <template v-slot:content>
        	<h5>新内容</h5>
        </template>
    </my-html>
</div>

Vue.component(father, {
    template: `<div>
		<slot name="content">
			<h4>原内容</h4>
		</slot>
	</div>`,  
})
new Vue({
    el: "#app",
})

实际 html 效果为

新内容