Vue 中自定义封装组件

最新推荐文章于 2024-08-18 17:04:11 发布

Mr_zrh

最新推荐文章于 2024-08-18 17:04:11 发布

阅读量388

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Mr_zrh/article/details/116754981

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

以下内容为自定义封装的一个小button按钮，这种自定义组件最好是放在components 文件夹下面

<template>
  <div>
      <button>牛</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style  scoped>

</style>

``











## 以下为用到自定义标签VUE文件中的代码

<template>
  <div>
        自定义封装组件小案例 :
        <my-button></my-button>
  </div>
</template>

<script>
  //  anniu 是随便起的变量名字    后面是引入的路径
  import  anniu  from "@/components/Button.vue"
// 下面这个my-button 就是自定义标签的名字，自己可以随意修改
export default {
  components: {
       "my-button" : anniu
  },
  
};
</script>

<style  scoped>

</style>