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 组件封装简单案例——小白入门所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。