组件可以简单理解为 "页面构成的一部分". 组件化是 Vue 最为重要的设计理念之一吧.
早期的前端页面基本上就拆分为一个个的html, css, js 文件, 然后不断"堆砌", 一套 js库走天下. 其特点就是随着页面越来越复杂, 其维护就成了一个大的问题. 后面前端不知咋地, 开始模仿后端设计了, 也出现了所谓的模块化, 组件化, 框架等等. 美其名曰前端工程. 确实是工程化了, 但也更复杂了. 以前前端的主要职责是写页面展示数据. 现在是卷全栈了.
从我个人体验来说, vue 这种组件化和单文件 (模板, 样式, 逻辑 都在一个文件中) 的方式是非常符合咱编程逻辑的, 我也是因为此写前端写出了后端逻辑的感觉, 但还是非常爽的哦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件体验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
inputValue: '',
list: []
}
},
methods: {
addItem () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="addItem">增加</button>
<ul>
<todo-item
v-for="(item, index) of list"
v-bind:content=item
v-bind:index="index"
/>
</ul>
</div>
`
})
// 注册全局子组件 todo-item, 其作用就是展示 li 的数据
// 父组件将数据通过绑定属性 content, index 的方式给子组件来传值
// 子组件 todo-item 通过 props 来接收 content, index 并进行应用
app.component('todo-item', {
props: ['content', 'index'],
template: `<li>{{index}}-{{content}}</li>`
})
app.mount('#root')
</script>
</body>
</html>
可以看出 vue 的组件化从形式上看即 "自定义html标签" , 这里主要是理解组件的逻辑和传值很关键.
先分析一下这一段:
<ul>
<todo-item
v-for="(item, index) of list"
v-bind:content=item
v-bind:index="index"
/>
</ul>
在 ul 标签中引入了一个组件叫 todo-item, 然后主流程将 data 通过绑定两个属性 content 和 index 传递给了 组件 todo-item.
再分析这一段:
app.component('todo-item', {
props: ['content', 'index'],
template: `<li>{{index}}-{{content}}</li>`
})
首先是将 todo-item 组件全局注册给了 app实例. 然后通过 props 属性来接收父组件通过属性传递过来的数据 content 和 index, 并将其应用到 todo-item 的逻辑中.
最后连成一体就渲染出来了. 这个组件一开始还是不太能理解的, 多用几次熟练就掌握了.