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下的ComponentsPractice
  import ComponentsPractice from "../components/ComponentsPractice";
  export default {
    name: "Practice",
    components:{
      ComponentsPractice
    }
  }
</script>

<style scoped>

</style>

执行 npm run serve 查看 Vue 项目的运行效果

点击按钮，弹出框显示：Vue组件封装初探

以上是对 Vue 组件封装的简单练习，后续会持续更新

最后

以上就是搞怪寒风最近收集整理的关于Vue 组件封装简单案例——小白入门的全部内容，更多相关Vue内容请搜索靠谱客的其他文章。