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 组件封装的简单练习，后续会持续更新

Vue 组件封装简单案例——小白入门相关推荐

Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
Vue组件封装的过程
Vue组件封装的过程 vue组件的定义组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...
Vue 组件封装之 Carousel 轮播图
Vue 组件封装之 Carousel 轮播图一.Carousel 轮播图组件二.使用案例三.API 使用指南四.源代码一.Carousel 轮播图组件组件说明: 实现无缝轮播. 效果展示: ...

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

Vue 组件封装简单案例——小白入门相关推荐

最新文章

热门文章