今天初步接触了 Vue 中的组件封装,将写好的公用组件封装在 src 的 components 文件夹下,在 views 文件夹下的 .vue 文件可以进行调用
以最简单的 button 按钮封装为例,在 components 文件夹新建ComponentsPractice.vue文件
<template><button @click="show">我是组件封装按钮</button></template><script>export default {name: "ComponentsPractice",methods:{show() {alert("Vue组件封装初探")}}}</script><style scoped></style>
在 views 文件夹新建 Practice.vue 文件,将写好的 button 组件进行引入
<template><ComponentsPractice></ComponentsPractice></template><script>// 引入components下的ComponentsPracticeimport ComponentsPractice from "../components/ComponentsPractice";export default {name: "Practice",components:{ComponentsPractice}}</script><style scoped></style>
执行npm run serve
查看 Vue 项目的运行效果
点击按钮,弹出框显示:Vue组件封装初探
以上是对 Vue 组件封装的简单练习,后续会持续更新