100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue 组件封装简单案例——小白入门

Vue 组件封装简单案例——小白入门

时间:2024-06-28 01:48:22

相关推荐

Vue 组件封装简单案例——小白入门

今天初步接触了 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 组件封装的简单练习,后续会持续更新

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。