当前位置：首页 > news >正文

【Vue2 ✨】 Vue2 入门之旅（五）：组件化开发

news 2025/9/3 6:34:10

前几篇文章中我们学习了 Vue 的基础语法和生命周期。本篇将进入 组件化开发，这是 Vue 的核心思想之一。通过组件，我们可以让页面结构更清晰、代码更易维护。

什么是组件

组件是 Vue 的核心概念，可以理解为一个 可复用的 UI 模块。
一个组件包含：模板、逻辑、样式。

例子：页面上有“头部”“内容区”“底部”，我们可以把它们写成独立组件。

组件注册方式

全局注册

通过 Vue.component 注册的组件，可以在所有实例中使用。

<div id="app"><my-component></my-component>
</div><script>
Vue.component('my-component', {template: '<p>我是全局组件</p>'
})new Vue({el: '#app'
})
</script>

局部注册

在某个 Vue 实例或组件内部注册，只能在该作用域中使用。

<div id="app"><local-comp></local-comp>
</div><script>
var LocalComp = {template: '<p>我是局部组件</p>'
}new Vue({el: '#app',components: {'local-comp': LocalComp}
})
</script>

父子组件通信

props 父传子

父组件通过 props 给子组件传递数据。

<div id="app"><child-comp :msg="parentMsg"></child-comp>
</div><script>
Vue.component('child-comp', {props: ['msg'],template: '<p>子组件收到：{{ msg }}</p>'
})new Vue({el: '#app',data: {parentMsg: '来自父组件的数据'}
})
</script>

$emit 子传父

子组件通过 $emit 向父组件发送事件。

<div id="app"><child-comp @child-click="handleChild"></child-comp>
</div><script>
Vue.component('child-comp', {template: '<button @click="$emit(\'child-click\')">点我</button>'
})new Vue({el: '#app',methods: {handleChild: function () {alert('父组件收到了子组件的事件！')}}
})
</script>

插槽

插槽（slot）用于让父组件向子组件插入内容。

默认插槽

<child-comp>这是插槽内容</child-comp><script>
Vue.component('child-comp', {template: '<div><slot></slot></div>'
})
</script>

具名插槽

<child-comp><template v-slot:header>这里是头部</template><template v-slot:footer>这里是底部</template>
</child-comp><script>
Vue.component('child-comp', {template: `<div><header><slot name="header"></slot></header><main>内容区域</main><footer><slot name="footer"></slot></footer></div>`
})
</script>

作用域插槽

子组件向插槽暴露数据，父组件决定如何渲染。

<list-comp :items="list"><template v-slot:default="slotProps"><p>{{ slotProps.item.text }}</p></template>
</list-comp><script>
Vue.component('list-comp', {props: ['items'],template: `<div><slot v-for="item in items" :item="item"></slot></div>`
})new Vue({el: '#app',data: {list: [{ text: '苹果' }, { text: '香蕉' }]}
})
</script>